Widget Random Post dengan gambar dan judul untuk Blogspot

HaiSob apa kabar? ok sobat pada kesempatan ini saya akan berbagi sebuah widget Bloger yaitu Widget Random Post dengan gambar dan judulnya.

Widget random post adalah widget yang menampilkan artikel secara random/acak dari sebuah blog/web. Fungsinya sederhana saja yaitu agar membuat pengunjung blog tertarik untuk melihat artikel lain yang ada di blog.

Perbedaan widget ini dengan widget yang lain (misalnya recent post) adalah ketika pengunjung blog berpindah/berganti halaman, maka widget ini akan menampilkan artikel lain/berbeda dari artikel yang di tunjukan widget ini dihalaman sebelumnya.

Widget Random Post Dengan Gambar

Widget Random Post Dengan Gambar
Widget Random Post



Cara memasang Widget Random Post dengan gambar dan judul di Blogger

Berikut ini adalah widget randompost dengan gambar. Contoh tampilannya adalah seperti demo dan gambar diatas, oh yah gayanya akan menyesuaikan dengan template yang kamu gunakan.

Baca juga: Percantik tampilan Blog kamu dengan Slider ini

1. Di Blog Blogger 😀
2. Pilih menu Tata Letak lalu klik  Tambahkan Gadget.
3. Kemudian pilih widget HTML/JavaScript

Cara membuat widget Feedburner/ kotak berlangganan artikel Blog
Tata Letak >> Tambah Gadget >> HTML / Javascript

3. Masukan kode dibawah ini
<style>
.rp-haisob{border:1px solid #ddd;padding: 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}
.rp-haisob2{border:1px solid #ddd;padding:5px 10px;overflow:hidden;box-shadow: -2px 2px 3px #ddd;background:#fff;border:1px solid #ddd;}
#random-posts img{float:left;margin-right:10px;border:1px solid #ddd;background:#fff;width:65px;height:65px;padding:3px;border-radius:2px;}</style>
</style>
  <div class="rp-haisob">
    <div class="rp-haisob2">
  <!-- start -->
<div 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=\"http://www.haisob.com/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=\"http://www.haisob.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</div>
  <!-- /end -->
</div></div>
4. Ganti link berwarna biru diatas dengan link blog kamu
5. Save widget.

Baca juga: Begini cara memasang headline news di Blog Blogger

Catatan:
Widget ini akan mengikuti style template yang kamu gunakan, jadi hasilnya akan berbeda dengan demo diatas. Kenapa saya tidak menambahkan style pada kode yang dibagikan, ini karena mungkin akan berbeda dengan gaya template yang kamu gunakan.
Join This Site