Cara Membuat Widget Random Post (Artikel Acak) Thumbnail Lingkaran

Santos el Salam

10 Januari 2022

Agar artikel-artikel lain semakin banyak diekspos oleh para pengunjung blog anda, memasang widget random post mungkin bisa anda lakukan untuk melengkapi keberadaan widget-widget yang sudah terpasang di blog anda. Widget Random Post merupakan sebuah widget yang berfungsi untuk menampilkan daftar artikel di sebuah blog secara acak (random).

screenshot random post

Dengan memasang widget ini, akan banyak artikel-artikel lain yang akan dimunculkan secara acak untuk ditampilkan kepada para visitor yang mengunjungi blog anda. Dengan demikian, tentunya akan lebih banyak lagi artikel yang akan dibaca oleh pengunjung blog anda. Bahkan ketika mereka melakukan loading ulang halaman, semua artikel pada gilirannya akan dimunculkan di widget ini.

Pada postingan kali ini, kita akan coba belajar membuat widget random post dengan tampilan sederhana namun cukup menarik yaitu dilengkapi dengan thumbnail (gambar) bentuk lingkaran. Silahkan ikuti langkah-langkah di bawah ini:

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya.

/* Random Post */

#bo-random-posts{padding: 3px; background: #fff;color:#999;font-size:12px;margin-top:5px;margin-bottom:-17px}

#bo-random-posts img{background:#fafafa;float:left;height:65px;margin-right:10px;width:65px;border-radius:100%}

#bo-random-posts ul{margin:0;padding:0}

#bo-random-posts li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px dotted #e5e5e5;}

#bo-random-posts li:last-child{border-bottom:0}

#bo-random-posts li a{display:block;color:#222;font-weight:bold;text-decoration:none;font-family:Verdana;font-size:14px;margin:0 0 10px 0;line-height:normal}

#bo-random-posts li a:hover{color:#c00} 

4. Simpan template. 

5. Buka menu tataletak (layout), kemudian klik tambahkan gadget. 

6. Silahkan pilih html/javascript. 

7. Tambahkan judul widget, kemudian pastekan kode di bawah ini:

<ul id='bo-random-posts'>

<script> var borp_number = 10; var borp_details = 'no'; var borp_chars = 0; var borp_details2 = 'no'; var borp_comments = 'Komentar'; var borp_commentsd = 'Comments Disabled'; var borp_current = []; var total_randomposts = 0; var borp_current = new Array(borp_number); function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t; } document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>'); function getvalue() { for(var r=0;r<borp_number;r++){for(var n=!1,o=get_random(),t=0;t<borp_current.length;t++)if(borp_current[t]==o){n=!0;break; } n?r--:borp_current[r]=o; }} function get_random() { return 1+Math.round(Math.random()*(total_randomposts-1)); } </script> <script>function random_posts(t) { for(var e=0;e<borp_number;e++){var r=t.feed.entry[e],s=r.title.$t;if("content"in r)i=r.content.$t;else if("summary"in r)i=r.summary.$t;else var i="";if((i=i.replace(/<[^>]*>/g,"")).length<borp_chars)var a=i;else{var n=(i=i.substring(0,borp_chars)).lastIndexOf(" ");a=i.substring(0,n)+"&#133;"; } for(var o=0;o<r.link.length;o++) { if("thr$total"in r)var l=r.thr$total.$t+" "+borp_comments;else l=borp_commentsd;if("alternate"==r.link[o].rel){var m=r.link[o].href,c=r.published.$t;if("media$thumbnail"in r)var u=r.media$thumbnail.url;else u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qu4ovpopp__CucZSvAtZTyC9jMfHm4Mnq2OOKhyphenhyphennnDfSElSnEJBhiiaOEax7UEzsupCZiUtOykwXyoD8KSGNYWSAX29i7ACj8gLZEcNHhcGRbtyt0QVYUHQry84qKB7SPH-_lCsinKDN/s1600/no_thumb.png"; }} document.write("<li>"),document.write('<img alt="'+s+'" src="'+u+'"/>'),document.write('<div><a href="'+m+'" rel="nofollow">'+s+"</a></div>"),"yes"==borp_details&&document.write("<span>"+c.substring(8,10)+"."+c.substring(5,7)+"."+c.substring(0,4)+" - "+l),"yes"==borp_details2&&document.write('<span class="random-summary">'+a),document.write('<div style="clear:both"></div></li>'); }} getvalue();for(var i=0;i<borp_number;i++)document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+borp_current[i]+'&max-results=1&callback=random_posts"><\/script>');</script></ul>

Keterangan:

• 10 = Atur jumlah artikel yang hendak ditampilkan. 

8. Simpan widget. 

Silahkan lihat hasilnya yang telah tercipta. Demikianlah cara membuat widget Random Post keren thumbnail lingkaran. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Widget Random Post (Artikel Acak) Thumbnail Lingkaran. Please share...!

Facebook

Twitter