Cara Membuat Random Post dengan Thumbnail
Random Post adalah menampilkan post-post yang sudah kita post ke blog secara acak. Tidak hanya judul, tetapi kita juga bisa menampilkan random post dengan disertai summary yaitu ringkasan isi dan thumbnail atau cuplikan gambar. Tampilan random post jadi lebih menarik, seperti halnya popular post.
Dulu, Belajar Ngeblog di BLOG juga pernah membahas tentang membuat Random Post, tetapi yang tampil hanya judul. Nah, sekarang kita akan belajar membuat random post dengan juga menampilkan thumbnail untuk mempercantik tampilan dan ringkasan isi post agar pembaca tertarik melihat.
Dengan memasang Random Post, tulisan-tulisan kita yang terdahulu bisa menjadi tampil dan bisa kembali dibaca pengunjung blog. Ada pilihan menu baru yang sebenarnya itu sudah lama, kita suguhkan kembali melalui Random Post. Pengunjung akan banyak pilihan dan berlama-lama di blog kita.
Cara Membuat Random Post dengan Thumbnail
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
5. Sebelum kita Simpan, ada beberapa yang bisa kita ubah agar sesuai dengan tampilan blog kita, diantaranya:
width:65px;height:65px; --> 65 adalah ukuran thumbnail
lengthsummary = 180; --> 180 adalah jumlah karakter isi post
numofpost=5; --> 5 adalah jumlah post yang ditampilkan
6. Simpan jika sudah selesai.
Dulu, Belajar Ngeblog di BLOG juga pernah membahas tentang membuat Random Post, tetapi yang tampil hanya judul. Nah, sekarang kita akan belajar membuat random post dengan juga menampilkan thumbnail untuk mempercantik tampilan dan ringkasan isi post agar pembaca tertarik melihat.
Dengan memasang Random Post, tulisan-tulisan kita yang terdahulu bisa menjadi tampil dan bisa kembali dibaca pengunjung blog. Ada pilihan menu baru yang sebenarnya itu sudah lama, kita suguhkan kembali melalui Random Post. Pengunjung akan banyak pilihan dan berlama-lama di blog kita.
Cara Membuat Random Post dengan Thumbnail
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<style>
.rp-post-link {
font-weight: bold !important;
font-size: 120% !important;
}
.rp-summary {
margin-top: 3px !important;
font-size: 100% !important;
line-height: 1.3em !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:65px;height:65px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 180;
var numofpost=5;
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"
var pubdate = new Date(entry.published.$t).toDateString();
item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>";
if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>
.rp-post-link {
font-weight: bold !important;
font-size: 120% !important;
}
.rp-summary {
margin-top: 3px !important;
font-size: 100% !important;
line-height: 1.3em !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:65px;height:65px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 180;
var numofpost=5;
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"
var pubdate = new Date(entry.published.$t).toDateString();
item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>";
if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>
5. Sebelum kita Simpan, ada beberapa yang bisa kita ubah agar sesuai dengan tampilan blog kita, diantaranya:
width:65px;height:65px; --> 65 adalah ukuran thumbnail
lengthsummary = 180; --> 180 adalah jumlah karakter isi post
numofpost=5; --> 5 adalah jumlah post yang ditampilkan
6. Simpan jika sudah selesai.
iya bener pak, biar hasil posting terdahulu bisa kebaca lagi dan tak terlupakan ,, makasih udah mau berbagi
BalasHapusini yang random nya seperti skroll apa yg otomatis jalan mas??
BalasHapusFollow Sukses 2965
Name : Wong Sirau
Thank gan, infonya sangat bermanfaat, ditunggu info selanjutnya...
BalasHapusterima kasih sudah berbagi infonya
BalasHapusmantap infonya gan,,terima kasih sudah berbagi infonya
BalasHapusterima kasih sudah berbagi infonya,,bermanfaat sekali
BalasHapusijin untuk di praktekkan gan,,terima kasih sudah berbagi infonya
BalasHapusijin untuk di praktekkan gan,,terima kasih sudah berbagi ilmunya
BalasHapuswah..boleh nih di coba,,terima kasih untuk infonya gan
BalasHapusok deh gan,,saya praktekkan dulu,,terima kasih sudah berbagi infonya
BalasHapusinfonya bermanfaat sekali,,terima kasih sudah berbagi
BalasHapusmakash bnyak infonya gan..
BalasHapusokeh deh dicoba dulu tutornya..
BalasHapusmakasih tips and triknya Mas :)
BalasHapusokeh bnget niihh tutornya,,langsung dicoba aj dah,,makash bnyak gan infonya..
BalasHapusitu kodenya disimpan setelah kode apa Gan???
BalasHapusmakash bnyak gan,,langsung mnju tempat tkp aj daahh
BalasHapuslangsung dicoba aj dah gan tutornya..
BalasHapusmakasih sudah mau berbagi ...
BalasHapusenni nyang ane cari - cari gan...thanks a lot
BalasHapusKeren juga infonya,makasih
BalasHapusmakasihh sobat udah mau sharing nih tipsnya :)
BalasHapusnambah ilmu nih, terimakasih yaaaa udh share ilmunya..heheee
BalasHapusthx gan tips nya
BalasHapuswow....sangat luaar biasa, begitu bermanfaat, begiitu mulia semoga apa anda sampaikan ini menjadi amal jariah...............amin..........
BalasHapusmantap nih sering share yang beginian..hheeee
BalasHapusbaru nemu disini nih ane tips yang pas... makasih yaaaaa
BalasHapusTerima kasih gan, tipsnya sangat membantu saya dalam mengembangkan blog,
BalasHapusSalam kenal, mas Bro. ;)
BalasHapusPertama, saya ucapkan terimakasih, blognya berada pada urutan pertama menggunakan kata kunci http://goo.gl/H1Ywd 'nge-blog'.
Dan untuk posting ini, saya sudah mencoba, tetapi blog menjadi lemot sekali, loding aja terus ga' berhenti, situs tidak terbuka sama sekali. Template yang saya gunakan standard bawaan Blogger.
Ada yang mengalami masalah yang sama?
wakh matap sobb izin sedot untuk diterapkan sama blo saya terima kasih dan sukses selalu!!!
BalasHapusterimakaisih ats tips nya gan
BalasHapusdicoba dulu aahh,,mksh bnyak gan..
BalasHapusmenarik sekali infonya..
BalasHapusinfo yg sangat bermanfaat sekali..
BalasHapuscukup membantu sekali infonya..
BalasHapusSkripnya terlalu panjang gan...ntar loading blognya terlalu lama?? ada yg lebih simpel g'????
BalasHapusmantap gan..tapi kebanyakan widget loading blog jadi lama
BalasHapusHal yang tidak pernah terbayankan kini menjadi kenyataan dengan keluargaku,,,untuk MBAH SARTO kami ucapkan banyak terimakasih karna berkat bantuannya ALHAMDULILLAH keluarga kami bisa lepas dari hutang dan masalah,karna nomor “GHOIB”untuk pasangf togel,hasil ritual MBAH SARTO meman benar2 merubah nasib kami hanya sekejap,dan disitulah aku berkesempatan kumpulkan uang untuk buka usaha kembali,karna baik rumah sudah disita,,warung makan jg sudah bangkrut,,tapi itu semua aku masih tetap bertahan hidup dengan anak istriku,,walau cuma kontrak tapi aku tetap bersabar dan akhirnya MBAH SARTO lah yang bisa merubah nasib kami..MBAH SARTO orang paling bersejarah kepada keluarga saya…!!! Kepada teman2 yang di lilit hutang dan ingin merubah nasib baik dari pada sekaran HBG: 082=378=607=111 MBAH SARTO,dengan penuh harapan INSYAH ALLAH pasti tercapai.
BalasHapushttp://jakartafinestmeat.wordpress.com
BalasHapushttp://meatspecialist.co.id
http://mitrabogatama.com
http://distributordaging.com
http://supplierdaging.com
http://proteinsolution.co.id
http://proteinatama.com
http://proteinatama.co.id
mantep mas
BalasHapusNice post gan ditunggu kunjungan baliknya di http://panca-hero.blogspot.com
BalasHapustengkyu mastah, langsung praktek
BalasHapusbagus ni tutorialnya setidknya adnya widget ini bisa membantu pengunjung mendapatkan postingan kita lainnya
BalasHapusTerima kasih gan infonya mantap..
BalasHapushttp://syamsblog95.blogspot.com/
di tunggu follow backnya
TOKO BELANJA ONLINE BEBAS RESIKO DAN TERPERCAYA DI LUNA SHOP.BURUAN BELANJA DAN DAPATKAN PROMO BANTING HARGA UNTUK SEMUA PRODUK KAMI Dijual.BlackBerry> Nokia> Samsung> Apple> Acer> Dell> Nikon. beminat hub/sms 0857-5740-7634 atau klik website resmi kami di www.lunashop77.blogspot.com
BalasHapusReady Stock! BlackBerry 9380 Orlando Black Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini Rp.500.000,-
Ready Stoc...k! BlackBerry Bold 9780 Onyx 2 Rp.800.000,-
Ready Stock! Blackberry Curve 9320 Rp.700.000,-
Ready Stock! Samsung Galaxy Tab 2 (7.0) Rp. 1.000.000
Ready Stock! Samsung Galaxy Nexus I9250 Titanium Si.
Rp.1.500.000,-...
Ready Stock! Samsung Galaxy Note N7000 Pink Rp.1.700.000.
Ready Stock!
Samsung Galaxy Y S5360 GSM Pure White Rp.500.000,-
Nokia Lumia 800 MORE PICTURES.
Ready Stock! Nokia Lumia 800 Matt Black Rp.1.700.000,-
Ready Stock! Nokia Lumia-710-white Rp. 900.000,-
Ready Stock! Nokia C2-06 Touch & Type Dual GSMRp.450.000,-
Nokia Lumia 710 T-Mobile MORE PICTURES.
Ready Stock! Nokia Lumia 710 Black Rp. 900.000,- Ready Stock! Apple iPhone 4S 16GB (dari XL) Black Rp.1.200.000,-
Ready Stock! Apple iPhone 4S 16GB (dari Telkomsel) Rp.1.200.000,-
Ready Stock!
Apple iPod Touch 4 Gen 8GB Rp.700.000.
Ready Stock!
APPLE iPod Nano 8GB Pink Rp.500.000,-
Ready Stock! Acer Aspire 4755G Core i5 2430 Linux Blue Rp 1.700.000.
Acer Aspire One AOD270 10.1 Netbook.
Ready Stock! Acer Aspire One AOD270 10.1 Rp. 1.000.000,-
Acer TravelMate TM8481-2462G32 14 Notebook.
Ready Stock! Acer TravelMate TM8481-2462G32 Rp. 1.400.000
Acer ICONIA Tab W500 10.1 Tablets Notebook (with Keyboard Docking).
Ready Stock! Acer ICONIA Tab W500 10.1 Tablets Notebook Rp. 1.100.000,-
Ready Stock!
Nikon D7000 kit 18-105mmRp.1.700.000.
Ready Stock!
Nikon D90 Kit 18-105mm Vr Rp 1.300.000.
Ready Stock!
Nikon Coolpix L 120 Red Rp. 900.000
Ready Stock!
Nikon Coo lpix P 500 Black Rp.1.000.000
Terima kasih mas kurnia atas postingannya..
BalasHapusTips Seo Friendly & Tips Blogger
thanksya bro ;)
BalasHapusmantap
BalasHapusthank's gan, tutorialnya...
BalasHapusdapat ilmu baru lagi dari Agan.. :)
Terima kasih sudah memberikan kesempatan untuk berkomentar, postingan ini sangat bermanfaat buat saya ;).
BalasHapusSilahkan di hapus jika kurang berkenan :)
Lowongan Kerja
Artikel Terbaru Terbaik
Tips Kerja
Lowongan Kerja
Prediksi Bola Togel
Prediksi Togel
Togel Hari Ini
Akan membuat weblog Anda sendiri. Terima kasih. ;)
BalasHapusmantap gan udah ane coba, ditunggu kunjungan baliknya beauty-id.blogspot.com ;;)
BalasHapusBoleh di coba nih Teman, makasih ya...
BalasHapusMakasih share ilmunya teman. Langsung dicoba Sob. Salam kenal
BalasHapusterima kasih kk informasinya http://memolodys.blogspot.com/2013/08/download-game-balap-karung-amikom.html#.UiD8kl219dy
BalasHapusterima kasih atas artikelnya sob .
BalasHapussudah saya peraktekan & berhasil :D
terimakasih info'y sob
BalasHapushttp://duniagame7.blogspot.com/
makasih gan...:)
BalasHapusnice post gan, ijin kopas scriptnya...
BalasHapussetelah membaca artikel ini, langsung memraktikan
BalasHapusTerimakasih banyak atas informasinya..!
BalasHapussalam kenal dan semoga sukses. . .
thx tutorial nya sob
BalasHapushttp://duniagame7.blogspot.com/
Ini yang saya butuhkan, sangat bermanfaat mas, sya coba dulu ya :)
BalasHapusSaya coba terapkan di blog saya ya mas semoga saja sesuai dengan tampilan yang saya butuhkan, thanks banget sudah share
BalasHapusKeren juga hasilnya :)
BalasHapusNice info :)
BalasHapuskeren ;;)
BalasHapuskalau menurut label tertentu yang gimana yah
BalasHapusterima kasih, berhasil diterapkan seperti yang saya harapkan
BalasHapusTerima Kasih gan..
BalasHapusInfo dan tips yang sangat bermanfaat sekali..
BalasHapusTerimakasih, Sangat bermanfaat (y)
BalasHapusterima kasih atas infonya sob
BalasHapushttp://www.duniagame.info/
http://si-kudil.blogspot.com/
terima kasih atas infonya sob
BalasHapuswah keren ni, izin coba gan
BalasHapushttp://freebiexp.blogspot.com
waaah artikel yang menarik,,.
BalasHapussalam kunjung :)
Jika hanya dengan gambar saja ada gan?
BalasHapusthank's
Keren gan... bisa untuk mengurangi bounce rate ni ;)
BalasHapusWah bisa yah pake random post. mantap... harus belajar nih... :
BalasHapusthankss gan
BalasHapusWaw sangat menakjubkan...
BalasHapusNice and quite informative post. I really look forward to your other posts.
BalasHapusToshiba - Satellite 15.6" Laptop - 6GB Memory - 750GB Hard Drive - Mercury Silver (L55DA5252)
Toshiba - Satellite 17.3" Laptop - 6GB Memory - 750GB Hard Drive - Satin Black
kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
BalasHapusdan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
berikan 4 angka 1803 alhamdulillah ternyata itu benar2 tembus AKI.
dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
allah saya akan coba untuk membuka usaha sendiri demi mencukupi
kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
insya allah anda bisa seperti saya…menang togel 275
juta, wassalam.
dijamin 100% jebol saya sudah buktikan...sendiri....
Apakah anda termasuk dalam kategori di bawah ini !!!!
1"Dikejar-kejar hutang
2"Selaluh kalah dalam bermain togel
3"Barang berharga anda udah habis terjual Buat judi togel
4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat
5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
tapi tidak ada satupun yang berhasil..
Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
anda semua dengan Angka ritwal/GHOIB:
butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
100% jebol
Apabila ada waktu
silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))
atau klik langsung di KLIK DSINI BOCORAN TOGEL
angka GHOIB: singapur 2D/3D/4D/
angka GHOIB: hongkong 2D/3D/4D/
angka GHOIB; malaysia
angka GHOIB; toto magnum 4D/5D/6D/
angka GHOIB; laos
wah ijin coba dulu nih gan :D
BalasHapusdengan disertai thumbnail tampilan random post tentu semakin menarik, thanks gan infonya.
BalasHapuswah tips yang sangat bermanfaat nih gan
BalasHapus