Cara Mudah Membuat Widget Random Posts Keren di Blogger

Tutorial Blog: Cara Mudah Membuat Widget Random Posts Keren di Blogger

Salam Saungjiwa Blog, kali ini saya akan mencoba membuat 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 Mudah Membuat Widget Random Posts Keren di Blogger 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 Mudah Membuat Widget Random Posts Keren di Blogger:

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

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

#Keterangan: 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.

Discl:

Blog ini berisi Artikel yang merupakan artikel dari Tahun 2013 lalu, namun dalam prakteknya masih dapat digunakan ataupun bisa juga tidak dapat digunakan pada era jaman sekarang Setelah di Perbaharui Kembali. Kalau teman teman blogger penasaran trik dan tips jadul ini, silahkan dicoba.  

• Khusus Artikel Game dan Aplikasi, untuk  link unduhan/download akan saya perbaharui sesuai yang disarankan oleh peraturan T.O.S Google tahun ini. Dan juga bisa saya link-kan pada situs lain (bisa situs resmi atau situs yang menyediakan) yang berhubungan dengan artikel tersebut. Terimakasih.

- Gambar diambil dari mana saja saat itu.

Demikianlah artikel saya tentang "Cara Mudah Membuat Widget Random Posts Keren di Blogger" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏 

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...