Membuat Random Post Hanya Dengan Thumbnail

Jika dilihat dari tampilan gambar yang di samping, ini akan sama dengan tampilan popular post yang saya bagikan kemarin yaitu modifikasi popular post hanya thumbnail, namun bekerjsama ini yaitu random post yang saya modif sehingga tampilannya hanya thumbnail-nya saja.

Baca juga: Modifikasi Popular Post Hanya Thumbnails Sederhana

Pada umumnya random post dengan thumbnail akan menampilkan thumbnail di sebelah kiri dengan judul post dan penggalan deskripsi di sebelah kanan, ada juga yang menampilkan tanggal post dan jumlah komentarnya.

Terus terperinci saja random post ini terinspirasi dari blognya kang +Ruly Jenar Nakula yang keren itu hehehehe... dan ini bekerjsama untuk random post template game online yang tengah saya modif secara blog game online selalu menampilkan banyak gambar supaya tampilan blognya menarik.

Untuk itu kemudian saya searching untuk script random post dengan thumbnail dan alhasil menemukan yang tidak mengecewakan simple dan gampang dimengerti. Kemudian saya modif sedikit supaya hanya menampilkan thumbnailnya saja. Sebenarnya random post agak berbeda dengan popular post yaitu randam post dapat menampilkan postingan lebih dari 10 buah, namun pada gambar di atas saya sengaja hanya penampilkan 9 buah post supaya tampilannya sama dengan popular post kemarin. 

Nah bagi yang ingin mencobanya juga silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama

Silahkan copy instruksi CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 !important;  padding: 0 !important;  }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;}
#random-posts img{float:left;margin-right:5px;margin-bottom:5px;border:none;width:90px;height:90px;transition:all 400ms ease-in-out;}
#random-posts img:hover {opacity:.7}

2. Langkah Kedua

Silahkan masuk ke tata letak dan tambahkan gadget HTML/JavaScript kemudian masukan script di bawah ini.

<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/AVvXsEhEZYFRPiZ0oTl17E9ETKp4RkR1SQP_ECQkxLrZcX4UWqpmBvZPLPAOEkcNZEqI3fwCc_vWW9ErRmHOEY71MoTGgqL77lscoqQQeAo49hbBX20hOvqzN2C3Hvn6TXXV1_9qRtGtUtl0gIJb/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="Membuat Random Post Hanya Dengan Thumbnail"><img alt="Membuat Random Post Hanya Dengan Thumbnail Membuat Random Post Hanya Dengan Thumbnail" src="'+rdp_thumb+'" title="Membuat Random Post Hanya Dengan Thumbnail" 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>

Untuk mengatur banyaknya post yang ditampilkan silahkan atur pada instruksi var rdp_numposts=9; dan untuk mengatur size gambarnya silahkan atur pada angka 90 yang berwarna merah pada instruksi CSS sama instruksi javascriptnya. Dan sehabis saya cek widget ini valid HTML5 dan CSS3 juga tidak mengurangi skor SEO pada Chkme dan image dimention di GTMetrix.

Selamat mencoba...

Sumber script: https://komporajaibku.blogspot.com//search?q=modifikasi-popular-post-hanya

Sumber https://www.kompiajaib.com/

Share this post