Cara Membuat Widget Random Post Keren di Blog

Cara Membuat Widget Random Post Keren di Blog - Hai sobat blogger. Masih membicarakan tentang blog, kali ini saya ingin membahas tentang widget random post untuk blog. Mungkin diantara anda ada yang ingin memasang widget yang bisa menampilkan sebagian postingan secara acak (random). Tanpa memandang label maupun waktu posting, widget random post akan menunjukkan postingan yang benar-benar dipilih secara acak dan bisa berubah jika direload. Nah apakah anda tertarik memasang widget seperti itu? Kalau begitu saya akan tunjukkan pada anda cara membuat widget random post yang keren untuk di pasang di blog.

1. Masuk ke akun blogger anda.

2. Pergi ke tata letak -> tambah gadget -> html/javascript.

3. Beri judul terserah anda, misal : Random Post.

4. Untuk kotak yang besar, isikan script berikut.

<style>
<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:white;width:60px;height:60px;padding:3px}
-->
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=7;
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=='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>

Untuk text yang berwarna oranye bisa anda ganti untuk mengubah warna border thumbnailnya.
Untuk text yang berwarna merah bisa anda ganti untuk mengatur jumlah postingan yang muncul.

5. Jangan lupa klik "simpan".

Selesai. Silahkan periksa blog anda. Widget random post kini sudah terpasang ke blog anda.

Semoga bermanfaat ^_^

7 comments:

  1. Makasih sob artikelnya kereeen, sangat membantu :)

    BalasHapus
  2. Terimakasih buat tutorialnya ini mas, sukses..

    BalasHapus
  3. wuih keren gan
    http://ekoyuliantodong.blogspot.com/

    BalasHapus
  4. wah keren infonya sobat, terima kasih...
    kunjungi blog saya ea sobat : http://yusufstudiofoto.blogspot.com/

    BalasHapus
  5. trimakasih mas. blog saya semakin kelihatan lebih keren banget mas.

    BalasHapus
  6. kalo mendatar carannya gimana gan? soalnnya deasin blognya kaya gini https://kajenstore.blogspot.co.id

    BalasHapus

Hargai penulis dengan memberikan komentar yang baik dan mengklik iklan yang ada

Rules komentar :
1. No SPAM
2. No live link (link aktif)
3. Jika bertanya gunakan akun yang terdaftar
4. Komentar yang tidak pantas akan dihapus oleh admin

 
Top