Membuat Widget Random Post di Blogger

#Blogger 

Hikz - Tutorial memasang Widget Random Post untuk blog. Random posts dengan tumbnail dan tanpa thumbnail.

Script random post yang akan saya bagikan disini bisa diletakkan di sidebar blog untuk di jadikan recent post atau bisa juga diletakan di bawah postingan untuk dijadikan related post.

Script ini bisa dibilang sangat bagus karena tidak membuat blog jadi lambat. Blog saya yang lainnya menggunakan blogspot dan di pasang random post saat di cek speed blognya tidak terlalu membebani loading blog.

Baca juga:
- Recent Post Warna Warni untuk Blog
- Magone Premium Blogger Template

Disini saya akan memberikan sekaligus 2 kode script random post dengan thumbnail dan random post tanpa thumbnail yang bisa pengunjung pasang langsung di blog.

Dibawah ini adalah kode random postnya, silakan copy paste kodenya:

Random post dengan Thumbnail

<style>
#random-posts img{background:#fff;height:50px;float:left;width:50px;margin:5px 5px 0px 0px;-webkit-border-radius:50%;border-radius:50%;-moz-border-radius:50%;padding:3px;}#random-posts img:hover{opacity: 0.5;filter: alpha(opacity=50);}
ul#random-posts {list-style-type: none;padding-left:0}
#random-posts li {margin: 10px 0;list-style: none;}
#random-posts li a{padding: 5px 0;text-decoration: none;}
.random-summary {display: block;}
</style>
<ul id='random-posts'>
<script>
var random_number = 5;
var random_details = 'yes';
var random_chars = 60;
var random_details2 = 'no';
var random_comments = 'Comments';
var random_commentsd = 'Comments Disabled';
var random_current = [];
var total_randomposts = 0;
var random_current = new Array(random_number);
function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue(){for(var r=0;r<random_number;r++){for(var n=!1,o=get_random(),t=0;t<random_current.length;t++)if(random_current[t]==o){n=!0;break}n?r--:random_current[r]=o}}function get_random(){return 1+Math.round(Math.random()*(total_randomposts-1))}
</script>
<script>function random_posts(t){for(var e=0;e<random_number;e++){var r=t.feed.entry[e],s=r.title.$t;if("content"in r)i=r.content.$t;else if("summary"in r)i=r.summary.$t;else var i="";if((i=i.replace(/<[^>]*>/g,"")).length<random_chars)var a=i;else{var n=(i=i.substring(0,random_chars)).lastIndexOf(" ");a=i.substring(0,n)+"…"}for(var o=0;o<r.link.length;o++){if("thr$total"in r)var l=r.thr$total.$t+" "+random_comments;else l=random_commentsd;if("alternate"==r.link[o].rel){var m=r.link[o].href,c=r.published.$t;if("media$thumbnail"in r)var u=r.media$thumbnail.url;else u="https://1.bp.blogspot.com/-atF9AaH_YEI/WXc5HKoFZmI/AAAAAAAAAGE/LoIPxdwBHecNVesXy9J0AQJwdIuWFYu0QCLcBGAs/s172/no_thumb.png"}}document.write("<li>"),document.write('<img alt="'+s+'" src="'+u+'"/>'),document.write('<div><a href="'+m+'" rel="nofollow">'+s+"</a></div>"),"yes"==random_details&&document.write("<span>"+c.substring(8,10)+"."+c.substring(5,7)+"."+c.substring(0,4)+" - "+l),"yes"==random_details2&&document.write('<span class="random-summary">'+a),document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<random_number;i++)document.write('<script type="text/javascript" src="https://hikz.xyz/feeds/posts/default?alt=json-in-script&start-index='+random_current[i]+'&max-results=1&callback=random_posts"><\/script>');</script>
</ul>

Random Post Tanpa Thumbnail

<style>
#random-posts{float:left;margin-bottom:10px;margin-top:0px;}
#random-posts ul{margin:0px;float:left;margin-left:0px;padding:0px;}
#random-posts li{vertical-align:middle;list-style: none;margin-bottom:0;width:auto;margin-top:0;padding:5px 0;}
#random-posts a{color:#0F0F0F;text-decoration:none;font-size:14px}
#random-posts a:visited {text-decoration: none;color:blue;}
#random-posts a:hover{color:blue}
</style>
<script>
function rp_results_label(r){for(var e=0;e<r.feed.entry.length;e++){var l=r.feed.entry[e];rpTitles[rpTitlesNumb]=l.title.$t;for(var t=0;t<l.link.length;t++)if("alternate"==l.link[t].rel){rpUrls[rpTitlesNumb]=l.link[t].href,rpTitlesNumb++;break}}}function removeRandomDuplicate(){for(var r=new Array(0),e=new Array(0),l=0;l<rpUrls.length;l++)contains(r,rpUrls[l])||(r.length+=1,r[r.length-1]=rpUrls[l],e.length+=1,e[e.length-1]=rpTitles[l]);rpTitles=e,rpUrls=r}function contains(r,e){for(var l=0;l<r.length;l++)if(r[l]==e)return!0;return!1}function showRandomLabels(){for(e=0;e<rpUrls.length;e++)rpUrls[e]==currentposturl&&(rpUrls.splice(e,1),rpTitles.splice(e,1));var r=Math.floor((rpTitles.length-1)*Math.random()),e=0;for(rpTitles.length>1&&document.write("<ul>");e<rpTitles.length&&e<20&&e<maxresults;)document.write('<li><a href="'+rpUrls[r]+'">'+rpTitles[r]+"</a></li>"),r<rpTitles.length-1?r++:r=0,e++;document.write("</ul>")}var rpTitles=new Array,rpTitlesNumb=0,rpUrls=new Array;
</script>
<div id="random-posts">
<script src="https://hikz.xyz/feeds/posts/default?alt=json-in-script&callback=rp_results_label&max-results=10"></script>
<script>
var currentposturl="";
var maxresults=6;
removeRandomDuplicate(); showRandomLabels();
</script>
</div>
Random Posts With Thumbnail Blogger | Random Posts Without Thumbnail Blogger

Cara Pemasangan Widget Random Post

1. Memasang script random post untuk di jadikan related post di sidebar blog.

  • Silakan pergi ke Dasboard blogger
  • Klik menu Layout
  • Klik Add a Gadget
  • Pilih HTML/JavaScript
  • Title isi saja terserah, atau bisa juga di isi recent post
  • Content isikan disini kode random post yang diatas.
  • Jika sudah klik Save

2. Memasang kode script random post di blog untuk dijadikan related post.

  • Masuk ke Dasboard blog
  • Klik menu Theme
  • Klik Edit HTML
  • Untuk mempermudah gunakan pencarian dengan cara klik Ctrl+F lalu masukan "<b:includable id='post' var='post'>"
  • Cari "<data:post.body/>" lalu tempelkan di bawahnya. Jika di bawah postingan ada social share, lebih baik dibawah share button.
  • Disini cara contohkan memasang script random post untuk blog menggunakan template viralgo, jika anda menggunakan template lain silakan sesuaikan saja.
  • Jika pemasangan kodenya sudah benar klik Save theme

Sekian saja artikel saya kali ini, semoga tutorial "Membuat Widget Random Post di Blogger" bermanfaat.