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.
Cara Membuat Widget Random Post Hanya Gambar
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="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};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.
Niagahoster
Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
Mulai dari
Rp15K
/Bulan

IDCloudHost

View Details
  • Free SSL Certificate
  • LiteSpeed Enterprise dan Load Balancer
  • Unlimited Email
  • cPanel Control Panel
Visit Site
Tersedia Cloud VPS termurah, hanya Rp68 /jam
Free and premium blogger templates