Cara Membuat Widget Random Post Hanya Menampilkan Thumbnail di Situs Blog

Kali ini kita mencoba untuk membuat widget random post yang hanya akan menampilkan thumbnail atau gambar saja di sidebar situs blogger. Widget ini hanya akan menampilkan postingan secara random atau acak.

Jika pada umumnya kita sering tahu widget random post yang menampilkan thumbnail di sebelah kiri judul postingan dan snippetnya, maka di widget ini judul postingan dan snippet atau ringkasan widget akan dihilangkan, sehingga hanya tersisa gambarnya saja. Dengan sedikit sentuhan CSS, widget ini terlihat semakin elegan saat disentuh atau terkena kursor.

Penasaran dengan widget ini dan tertarik memasangnya di situs blog anda?

Ikuti langkahnya berikut ini.

Cara Membuat Widget Random Post Hanya Menampilkan Thumbnail di Situs Blog

1. Login ke akun blogger,

2. Pilih menu Tata Letak  → Tambahkan Gadget (letakkan pada sidebar) → HTML/JavaScript.

3. Tempelkan kode berikut ini ke dalam Widget HTML/JavaScript 

<style type='text/css'>
#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 auto!important; padding: 0 !important;text-align:center }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;border:none;width:90px;height:90px;overflow:hidden;margin-right:5px !important;margin-top:5px !important}
#random-posts img{float:left;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;;border:none;outline:0;position:static;transition:all .8s ease-out;}
#random-posts img:hover {-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);}
</style>
<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=6;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmjnzNxAgQKo8AJ-Mv8ICsW_DRWr_3gx7fp8Or1r9OXHV2pp0n1ESomP97DaUn9s2ROEv8nB6RxaH7w2yJSHAbqdNYfW91YaZqBLLbv_IkN3gwS8AI_7AZMHJ0jzK37XvN0xNHbkTLbdV8/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>

Perhatikan kode JavaScript tersebut di atas, kode var rdp_numposts=6; adalah untuk menampilkan berapa banyak postingan yang ingin ditampilkan pada widget sidebar tersebut. Ganti angka 6 dan sesuaikan dengan kebutuhan situs blog anda.

3. Klik Simpan, dan kemudian refresh situs blog anda untuk melihat hasilnya.

Bila ada kendala pemasangan jangan lupa beritahu saya di kolom komentar

Share this

Author : Aridjaya

Related Posts