Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog

Cara Buat Random Post Dengan Gambar (Thumbnail) di Blogger – Widget Random Post ini sebenarnya sudah pernah saya bahas dalam posting sebelumnya (baca : Cara Memasang Widget Random Post di Blog). Namun, kali ini saya akan membahas widget random post yang memiliki thumbnail (gambar). Random post ini nantinya akan menampilkan gambar kecil (biasa dikenal dengan nama Thumbnail), dan sedikit kutipan teks dari posting yang ditampilkan. Berikut ini previewnya :

LIVE DEMO!

Tentu saja, widget random post ini lebih menarik (dan tentu saja keren) daripada widget random post yang pernah saya bahas sebelumnya. Dengan adanya gambar, pengunjung akan merasa lebih tertarik untuk mengunjungi posting lainnya di blog Anda. Walaupun, nantinya akan sedikit berimbas pada kecepatan loading blog Anda. Tapi, saya rasa tak masalah, mengingat kecepatan internet di indonesia sudah dapat dikatakan lumayan...

Berikut ini langkah – langkah memasang (membuat) random post dengan gambar (thumbnail) di Blogger

1. Seperti biasa, login ke Blogger.com, lalu masuk ke Tata Letak
2. Pilih Tambahkan Gadget ditempat Anda ingin memasang widget random post ini.
3. Pilih HTML / Javascript
4. Copy dan pastekan kode berikut pada window yang muncul (isikan pula isian Judul-nya)

<style> .rp-post-link { font-weight: bold !important; font-size: 12px !important; } .rp-summary { margin-bottom: 5px !important; border-bottom: 1px dotted #686868; font-size: 12px !important; line-height: 20px !important; word-wrap: break-word !important; } .rp-thumbnail { margin: 5px 5px 2px 0px !important; float: left !important; width:60px;height:60px; } .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 = 120; var numofpost=10; 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 += "/>" 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="http://xxpc123xx.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"> </script>

UPDATE 12 JULI 2015
Karena banyak yang menginformasikan saya bahwa kode diatas rusak dan tidak berfungsi (mungkin Anda merasakannya juga), Anda dapat mencoba kode pada link berikut.
Kode HTML Random Post Dengan Gambar

Keterangan :

var numofpost=10; Angka 10 menunjukkan jumlah posting yang akan ditampilkan. Gantilah sesuai dengan keinginan Anda.

var lengthsummary = 120; Angka 120 menunjukkan panjang kutipan posting yang akan ditampilkan. Aturlah sesuai dengan keinginan Anda.

Ganti url blog saya (http://xxpc123xx.blogspot.com) dengan url blog Anda.
Mohon maaf, saya belum bisa menambahkan warna pada textarea diatas. Ada yang bisa mengajari?

5. Terakhir, klik Simpan.

Bagaimana, mudah bukan? Jika Anda merasa artikel ini bermanfaat, tolong share artikel ini ke social media. Selamat mencoba memasang (membuat) widget random post dengan gambar di blog, dan salam blogger!