Cara mudah dan praktis membuat widget random post bergambar untukblogger – Random jika di artikan kedalam bahasa Indonesia adalah secara acak jadi widget random post adalah sebuah widget yang terpasang di blog yang akan menampilkan post secara acak.
Terus apa fungsi dari widget random post ini, ya… fungsinya adalah untuk menampilkan post-post yang telah lama, sehingga post yang sudah lama itu dapat memiliki peluang besar untuk dilihat oleh pengunjung, karena di tampilkan kembali.
Sebelum sobat membuat random post, terlebih dahulu silahkan lihat gambar di bawah ini, yang kiri adalah contoh random post dengan gambar kotak dan yang kanan adalah contoh random post dengan gambar bulat. untuk demo live nya, sobat bisa lihat di widget sebelah kanan pada blog ini. Setelah yakin mau menambahkannya ke dalam blog sobat, baru menuju TKP...
Cara praktis memasang widget random post bergambar di blog
1. Silahkan sobat masuk ke blogger.com\tata letak\tambahkan gadget\HTML/JavaScript
2. Copy kode berikut ini
<style>
#random-posts img{border-radius: 50px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #FFFFF;padding: 3px;transition: all 0.2s linear 0s;
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=120;
var rdp_info='no';
var rdp_comment='comment';
var rdp_disable='Comments Disabled';
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){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;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/AVvXsEhhxXZUa0vAJbcyRFnVwIABE7ugp2q1zCWlmtqZNy9fUagLdvZ1A_f1iKfqe5f70K03T2JbHPCgX6WqD3wOyvLIbRpKPbLC_aRd5dF8N2FJbqtM9nZiPtroDU3uN4BGvnget022DwQOgWw/s1600/no-image-available.jpg"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<div class="rp-snippet">'+rdp_snippet+'</div><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>
3. Klik Ok dan lihat hasilnya.
Keterangan ;
border-radius: 50px = jika sobat ingin gambarnya kotak silahkan rubah 50px menjadi 0px
var rdp_numposts=5; = untuk mengatur jumlah post yang akan ditampilkan
var rdp_snippet_length=120; = untuk mengatur jumlah kata yang akan di tampilkan
var rdp_info='no'; = ganti dengan yes jika ingin menampilkan info post
var rdp_comment='comment'; = kata comment akan muncul bila di bagian info sobat memilih yes, sobat bisa menggantinya dengan kata lain, komentar misalnya.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxXZUa0vAJbcyRFnVwIABE7ugp2q1zCWlmtqZNy9fUagLdvZ1A_f1iKfqe5f70K03T2JbHPCgX6WqD3wOyvLIbRpKPbLC_aRd5dF8N2FJbqtM9nZiPtroDU3uN4BGvnget022DwQOgWw/s1600/no-image-available.jpg = adalah link gambar untuk menampilkan gambar pada post yang tidak memiliki gambar. Sobat bisa menggantinya dengan gambar sobat.
Kode Random post bergambar ini saya dapatkan dari internet.
Selamat mencoba :)
