Random Post Fast Loading dengan Thumbnail ini biasanya dipasang di blog untuk menampilkan artikel secara acak dan menguntungkan blog karena akan menambah pageview dan pengunjung dengan mudahnya melihat artkel-artikel yang sedang dilihatnya, baik artikel yang masih baru dibuat ataupun artikel yang sudah lama dibuat akan muncul kembali. Widget random posts atau postingan acak yang akan saya share disertai dengan gambar / thubmnail, jadi terlihat lebih menarik dan tidak loadingnya juga ringan sehingga pembaca blog merasa senang karena tanpa harus menunggu lama.
Cara Membuat Widget Random Post Loading Ringan dengan Thumbnail
1. Buka blog anda di blogger.com
2. Pada dasbor, pilih Tata Letak => Tambah Gadget => HTML/Javascript
3. Masukkan kode dibawah ini
<style>
<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:40px;height:40px;padding:3px}
-->
</style>
<ul id='random-posts'><script type='text/javaScript'>var rdp_numposts=10;var rdp_snippet_length=60;var rdp_info='yes';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)+"…";};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/AVvXsEi9wjKgI1rDksMvqQ5W8Q3T485X_dmy_pD1wJh9d3E35uTSBvZgCEvI9V-GAZrbhaZlOt-3g49js3RoHI3MBRXh1iodQkpt0fekkc2hayFnBtxMplEphyphenhyphenHrJKLgUSnL2KSqFWPryqn_yedg/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');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>
4. Simpan
Keterangan :
- Teks warna merah adalah ukuran dari gambar / thumbnail, silahkan diganti
- var rdp_numposts=10; adalah jumlah artikel yang ditampilkan
- var rdp_snippet_length=60; adalah jumlah karakter
Demikianlah cara membuat random post dengan thubmnail dan loading cepat, semoga bermanfaat.
