Tuesday, March 22, 2016

Membuat Widget Post Acak dengan Gambar Fast Loading



Banyak sudah tutorial di blog-blog sebelah yang menyajikan tentang bagaimana membuat widget Random post. Namun apa salahnya bila kali ini admin juga ingin menyajikan hal yang sama. Setidaknya untuk saya sendiri bertujuan sebagai bahan pengingat bila sewaktu-waktu saya membutuhkan script random post ( postingan acak ) guna diaplikasikan ke blog yang lainnya. Bemacam-macam tipe cara pembuatan random post tentu berbeda dari satu script dengan script lainnya yang dihasilkan para sesepuh blogger, namun kali ini saya ingin memberikan script widget HTML random post yang super ringan walau dengan menggunakan gambar ( thumbnail.

Banyak yang mengeluh ketika ada blogger yang memasang kode widget Html Random post namun dirasa berat untuk melakukan loading script yang bersangkutan, dan juga banyak yang ogah melakukannya karena kode yang terpasang rata-rata menampilkan tanggal dan jumlah komen dari artikel yang bersangkutan. 

random post atau widget post acak

Bagi sobat semua yang ingin membuat widget dengan random post dengan menggunakan thumbnail namun tidak ingin menampilkan jumlah komentar dan tanggal publish-nya maka simak caranya di bawah ini.
1. Buka Tata letak pada blog sobat
2. Silahkan insert widget baru dan pilih HTML
3. Copy paste script di bawah ini
<style>
<!--
#random-posts img{float:left;margin-right:5px;border:1px solid #fff;background:#FFF;width:50px;height:50px;padding:3px}
-->
</style>
<ul id='random-posts'><script type='text/javaScript'>var rdp_numposts=5;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)+"&#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('<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=='no'){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. Untuk mengubah ukuran image bisa mengedit pada bagian width dan height. dan untuk jumlah postingan yang ingin ditampilkan silahkan ganti di script Numpost-nya.

Untuk contoh tampilan jadinya, sobat bisa melihat pada samping kanan blog ini. Untuk sekedar info, bila anda ingin menambahkan jumlah komentar dan tanggal rilis dari judul artikel yang ditampilkan padda random post maka lakukan perubahan sedikit pada kode HTML diatas. Silahkan ganti kode if(rdp_info=='no') dengan if(rdp_info=='yes'). Dengan sedikit perubahan di kode HTML diatas maka anda akan mendapati adanya tanggal publish serta jumlah komentar di bawah judul artikel yang ditampilkan.

Bagaimana sudah siap untuk bereksperiment dengan adanya random post di situs sobat ?, semoga dengan adanya random post trafik blog bisa semakin meningkat dan bisa menurunkan tingkat bounce rate.


Emoticon Emoticon