Sore sobat blogger semua, sekarang saya akan membagikan tips Cara membuat widget Random Post atau artikel acak dengan gambar kecil (with thumbnail) keren dan loading ringan. Untuk demonya silahkan lihat pada sidebar kanan blog ini. apakah anda tertarik untuk memasangnya? bila tertarik memasang ini dia caranya sebagai berikut :
Langkah-langkah Widget Random Post/Postingan Acak dengan Gambar (Thumbnail) :
1. Pilih menu tata letak kemudian tambahkan gadget
2. Lalu pilih HTML/JavaScript
3. Kemudian Copy semua kode dibawah ini dan pastekan ke kolom widget ke dalam HTML/JavaScript tersebut, untuk judulnya silahkan sobat bikin sendiri,
<style>
<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px; height:36px;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)+"…";};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/AVvXsEjafGxTEv3KJ5oTPbvyezMjCkOhn4fP_8b0jG4bqPQUR8HnHJufLKGdiNLDIKaGCST_IJrnkMNYqlnorj-qYDuQkrO8KXSkWYj5m91JY9UvZ3b43mrJhdrt2av1DYjLlEFIzkW2Gn2gPCi2/"}}};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>
Screenshot :
5. Simpan dan lihat hasilnya.
Keterangan :
- Kode #FFFFFF merupakan background widget random post, silahkan sobat ubah dengan warna yang sesuai dengan keinginan anda, untuk melihat kode warna Klik Disini.
- Angka 5 menunjukan jumlah artikel yang ditampilkan
- Angka 60 Jumlah isi cuplikan
- Kata 'Yes' adalah pilihan untuk memperlihatkan tanggal dan jumlah komentar, jika ingin menyembunyikan tanggal dan jumlah komentar, silahkan ganti dengan 'no'
- Jika ingin merubah ukuran gambar bisa anda ubah pada opsi width:36px;heigth:36.
Oke itulah tips kali ini yang bisa saya bagikan buat rekan-rekan semuanya, semoga artikel ini bermanfaat buat yang membutuhkannya, atas perhatiannya dan kunjungannya ke blog yang sederhana ini saya ucapkan terima kasih.oh iya jangan lupa tinggalkakan komentar,serta kritikannya ya :>)
Terkait : cara membuat rondom post menggunakan javascript, membuat rondom post di blog
