Setelah sebelumnya saya share tentang Widget recent post simple untuk blogspot, pada kesempatan kali ini saya ingin tambahkan satu lagi widget recent post. Lalu apa bedanya dengan widget yang sebelumnya? Perbedaanya terletak pada tampilan dan juga postingan yang ditampilkan. Untuk Widget yang saya share sebelumnya daftar artikel yang ditampilkan berdasarkan pada postingan yang paling terbaru yang anda publikasikan. Tetapi pada widge kali ini, postingan akan ditampilkan secara random atau acak. Jadi daftar postingan lama pun bisa dilihat oleh pengunjung blog anda.
Kelebihan dari widget yang satu ini adalah tidak memakan banyak space atau ruang di sidebar anda karena menggunakan tampilan scroll bar. Dan juga bisa menampilkan banyak postingan sekaligus, meskipun ukuran widgetnya relatif kecil. Selain itu tampilan blog anda juga terlihat rapi, karena tidak menapilkan list postingan yang panjang meskipun anda menampilkan 30 artikel dalam widget sekalipun.
Baiklah langsung saja kita ke cara pemasangannya,
1. Login ke akun Blogger >> kemudian masuk ke menu Tata letak >> lalu klik “tambahkan gadget” seperti pada gambar berikut ini,
2. Kemudian akan muncul tab kecil baru, dari situ pilihlah HTML/Java script
3. Setelah form HTML/Java script muncul, masukkan kode script berikut ini kedalam form.
<script type=”text/javascript”>
var randarray = new Array();var l=0;var flag;
var numofpost= 30 ;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(‘<ul>’);
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel==’alternate’){var item = “<li>” + “<a href=” + entry.link[k].href + “>” + entry.title.$t + “</a> </li>”;
document.write(item);}}
}document.write(‘</ul>’);}
</script>
<script src=”/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts” type=”text/javascript”></script>
<a style=”font-size: 9px; color: #CECECE; float: right; margin-top: 10px;” href=”http://www.idmarimo.com/2018/12/widget-recent-post-scroll-bar-postingan.html” >Recent Posts Widget</a>
</div>
Keterangan :
- 250px : Untuk mengatur ukuran tinggi widget recent post. Untuk lebar widget akan lansung menyesuaikan dengan sidebar blog anda.
- 30 : Untuk mengatur jumlah postingan yang ingin anda tampilkan.
- #999999 : Untuk mengganti warna border widgetnya. Saya sarankan anda ganti sesuai dengan border blog anda agar terlihat menyatu dengan blog.
4. Lalu klik simpan, dan lihat hasilnya di blog anda.
