Cara Membuat Widget Random Post Hanya Gambar

Tutorial blog kali ini tentang cara membuat widget random post di blog hanya menampilkan thumbnail atau gambar saja. Widget ini akan menampilkan postingan-postingan blog secara random atau acak.

Baca juga: Cara Membuat Recent Post Hanya Gambar Valid HTML5

Jika biasanya kita mengenal widget random post yang menampilkan thumbnail di sebelah kiri judul postingan dan snippetnya, maka pada widget ini judul postingan dan snippet atau ringkasan widget dihilangkan, sehingga 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 blog anda? Silahkan ikuti tutorialnya berikut. Untuk demonya anda bisa lihat pada screenshot di atas.

Cara Membuat Widget Random Post Hanya Menampilkan Thumbnail di Blog

1. Login ke blogger, masuk ke dasbor blog, kemudian temukan menu Tata Letak > Tambahkan Gadget (pada sidebar) > HTML/JavaScript,

2. Kopi dan paste kode di bawah ini ke dalam gadget tadi

<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=9;
    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/AVvXsEgoU7btuM1x-X5sDGP5Xj1dmCMB9OA4ddrQ50kmgaKgzfmXStzOKJuyzFO3RzFsJcZag5ghBKY8E-J-sYUpNtbjm5DNkpldCnnTBbJLlPqr8sVIuaFOi6xsynWld4V5-9WuhS2D0im6EbVj/"}}};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 di atas, kode var rdp_numposts=9; adalah untuk menampilkan berapa banyak postingan yang ingin ditampilkan pada widget. Ganti angka 9 dan sesuaikan dengan kebutuhan blog anda.

3. Simpan, kemudian refresh blog anda untuk melihat hasilnya.

Demikian tutorial tentang cara membuat widget random post hanya menampilkan thumbnail atau gambar postingan. Tertarik untuk menerapkannya di blog anda? Selamat mencoba.