Membuat Random Post dengan Gambar

Pada postingan kali ini saya ingin menshare tentang bagaimana cara untuk membuat random post dengan gambar yang akan tampil di widget/gadget yang ada pada blog.
Langsung saja ke toturial di bawah ini :



1. Langsung saja copy Code 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;
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 += "/>"
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>

2. Buka dashbor pada blog
3. Lalu ke tata letak
4. tambahkan gadget baru pilih HTML/JavaScript
5. Masukkan code yang telah di copy tadi
6. Klik selesai

untuk jumlah postingan var numofpost=5 ganti angka 5 dengan jumlah postingan yang ingin di tampilkan,