Cara Membuat Widget Random Posts Keren di Blog

Telah dijelaskan pada posting sebelumnya, Widget Random Posts ini adalah widget untuk menampilkan posting-posting pada Blog sobat secara acak dan berbeda pada setiap penayangannya. Namun kali ini saya akan berbagi tentang Cara Membuat Widget Random Posts Keren di Blog yang tentunya berbeda dalam hal tampilan dengan widget random posts yang sebelumnya.
Untuk tampilan pada widget random posts sebelumnya sangat minimalis, hanya menampilkan Title Posting saja. Namun untuk Widget yang akan kita bahas kali ini terlihat lebih menarik. Widget Random Posts ini selain menampilkan Title Posting, juga menampilkan Tumbnail (Gambar ukuran kecil), dan sedikit deskripsi posting.
OK, tidak perlu berlama-lama lagi. Sobat yang tertarik untuk memasang widget ini, beginilah Cara Membuat Widget Random Posts Keren di Blog:

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak pada Blog yang sobat inginkan.
3. Klik Tambahkan Gadget pada posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut.

<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://regibrader-free.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>

<small><a href="http://regibrader-free.blogspot.com/search/label/Widget%20Blog" target="_blank">Blogger Widget</a></small>
<small><a href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-random-posts-keren.html" target="_blank">Get This Widget</a></small>

#Ubahlah kode warna merah dengan URL Blog sobat. Tentukan jumlah posting yang akan ditampilkan pada kode warna biru. Dan kode berwarna ungu adalah jumlah huruf yang akan ditampilkan pada deskripsi posting pada widget.
Untuk tinggi widget bergantung kepada jumlah posting yang ditampilkan.

6. Setelah sobat selesai mengaturnya, klik Simpan dan Widget pun telah berhasil dipasang. Lihat hasilnya..

ADVERTISMENT