Cara Membuat random post dengan gambar atau thumbnail di blog

Blogger

Membuat random post dengan gambar atau thumbnail di blog memang tidak terlalu sulit. Banyak sekali blogger yang memasang berbagai macam widget pada blognya. Namun widget-widget tersebut kurang memberikan efek atau manfaat yang terasa pada kemajuan blog.

Blog yang berkualitas juga dilihat dari tampilan widget-widget yang dipasang. Salah satu widget yang banyak digunakan oleh banyak blogger adalah widget random pos, baik itu Random Post yang biasa saja atau pun random post yang dilengkapi dengan thumbnail atau gambar. 

Random Post

Random post atau yang sering disebut dengan artikel "sembarang" adalah widget yang menampilkan postingan/artikel blog kita secara acak baik itu artikel yang baru dibuat atau pun artikel yang sudah sangat lama, sehingga artikel-artikel lawas anda dapat kembali dibaca oleh pengunjung blog.

Tentu saja ini sangat menguntungkan, karena dengan random post ini pageviews pada tiap artikel blog saudara bisa meningkat dari sebelumnya. Dan memberikan efek yang bisa dibilang cukup besar dalam meningkatkan kualitas blog saudara.

Cara Memasang Random Post Beserta Thumbnail

Sama halnya dengan Popular Post yang bisa dipasangi gambar, Random post yang akan saya bagikan kali ini juga sudah saya modifikasi dengan gambar sehingga akan mempercantik tampilannya. Tidak hanya itu, pada random post saya kali ini juga ada ringkasan postinganya yang dapat membuat pengunjung tertarik untuk membacanya.

Buat anda yang tertarik memasang widget random post ini, silahkan ikuti langkah-langkah sederhana di bawah ini:

1. Login dengan akun blog saudara

2. Masuk ke menu TATA LETAK

3. Klik tambah gadget --> pilih HTML/Javascript

4. Masukan script di bawah ini:

<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; //Jumlah karakter postingan yang ditampilkan
var numofpost=5; //Jumlah postingan yang ditampilkan
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="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>

Keterangan kode di atas:

• Kode warna Hijau: Mengatur lebar dan tinggi gambar/thumbnail pada random post nanti.
• Kode warna Merah: Jumlah Postingan yang ingin ditampilkan.
• Kode warna Biru: Jumlah karakter/huruf pada ringkasan yang ingin ditampilkan.

5. Klik simpan dan lihat hasilnya.

Bagaimana? Mudah bukan membuat random post yang disertai dengan thumbnail.