Cara Membuat Random Post Hanya Thumbnail

Bangiz - Untuk sahabat Blogger yang sedang mempercantik tampilan blognya, mungkin widget yang satu ini bisa menjadi pertimbangan. Widget random post ini tentunya akan menampilkan postingan Anda secara acak yang mana tampilannya hanya menampilkan thumbnail gambar, tetapi dilengkapi juga dengan tooltip. Jadi ketika thumbnailnya tersentuh mouse maka akan muncul judul dan deskripsi atau hanya judul saja tergantung pengaturan Anda. untuk visualnya silahkan lihat gambar berikut ini:

Normal

Ketika tersentuh mouse

Jika tertarik dengan widget yang hanya menampilkan thumbnail dan dilengkapi dengan tooltip, berikut tutorialnya:

1. Masuk dasbor Blogger.

2. Pilih Tata Letak > Tambahkan Gadget > Cari dan pilih HTML/Javascript.

3. Silahkan ketik judul yang sesuai dan copy-paste kode berikut pada kolom yang tersedia:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#random-posts {float: center;text-transform: none; box-shadow: 0 0 0 1px white inset;-moz-box-shadow: 0 0 0 1px #fff inset;-webkit-box-shadow: 0 0 0 1px white inset;padding: 1px;}
#random-posts li{float:left;list-style:none;position:relative}
#random-posts li:last-child{margin-right:0}
#random-posts li img{width:100px;height:100px;padding:2px;}
#random-posts li img:hover {background-color: #F77B09;color: white; font-weight: bold; text-decoration: initial;}
#random-posts li .rp_animation{position:absolute;width:100px;top:-50px;z-index:2;background-color:#FFFFFF;padding:2px;font-size:100%;border:1px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0}
#random-posts li:last-child .rp_animation{right:0}
#random-posts li:hover .rp_animation{top:-100px;opacity:1;visibility:visible}
.rp_animation span{font-size:100%;color:#111111}
.rp_animation p{font-size:100%;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
//<![CDATA[
var rdp_numposts = 16; //Number Of Random Posts
var rdp_snippet_length =150; //Length Of Description Text, 0 To Hide
var rdp_datecomment = 'yes'; //Show Date And Comment 'yes/no'
var rdp_comment = 'Comments'; //Text For Comment Count
var rdp_disable = 'Comments Are Off Here...'; //Text If Comment Is Disabled On Post/Blog
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);
function totalposts(a){rdp_total_posts=a.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 b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a};
//]]>
</script>
<script type='text/javaScript'>
//<![CDATA[
function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ9SvOsGkeiz3NxJXZGMJ87Ia5eeAHHA3YVF2NTUFrmij1c3xVhoCKtXXdCHLQnKgOTvhufxpoB_QfbuQJ-VEzZ6YTvILjNN5xOW6hfPpi4Jb6GrDiUl5zvLWlpmIHsBQFTTLJb8ECrfY/s400/noimage.png"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="rp_animation"><h5>'+m+"</h5>");if(rdp_datecomment=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");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>
<div style='clear:both'/>
<div align='bottom-right'><a href='http://bangiz.blogspot.com' target='blank'><small>Get This</small></a></div>
</div></b:if>

4. Klik simpan dan lihat hasilnya.

Demikian tutorial cara membuat random post dengan thumbnail versi Bangiz. Untuk pengaturannya sebagian sudah diberi warna yang berbeda tinggal sesuaikan dengan template yang Anda gunakan. Disana Anda bisa mengatur tinggi dan lebar thumbnail, jumlah post yang akan ditampilkan, panjang snippet atau deskripsi, menampilkan tanggal dan komentar dan sebagainya. Jika kurang mengerti silahkan tinggalkan komentar dan jika berkenan silahkan share ke teman Anda. 

Cara membuat random post dengan efek animasi silahkan lihat disini