Kumpulan Cara Membuat Random Post Keren diBlog

Postingan acak atau random post adalah salah satu alat navigasi pada sebuah blog. Dengan memasang widget random post di blog akan semakin meningkatkan peluang visitor blog berlama-lama menelusuri blog sobat karena bisa jadi para pembaca melihat salah satu judul artikel menarik yang muncul dari widget random post.

Memasang widget random post memang bukan sebuah keharusan bagi pemilik blog tapi dengan memasangnya maka blog sobat akan semakin terlihat komplit. Yang bisa kita harapkan dari pemasangan widget random post maka bounce rate blog akan semakin kecil.

Oke, sobat tekno tidak berlama-lama kali ini saya coba share berbagai macam widget random post cantik mulai dari mode link judul postingan, random post dengan thumbnail dan random post dengan multi warna yang dikumpulkan dari hasil googling.

Bagi sobat blogger pemula silakan ikuti langkah pemasangan widget random post keren berikut ;

1. add elemen >> html

2. Copy dan pastekan script random post pada kotak elemen yang baru sobat buat

# Random Post Hanya link judul artikel

Klik show untuk melihat

<style type="text/css">
.noop-random-posts ul li {
    list-style-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdZ-wHEHk69qDg_cbJAsfNCTFqxupq7daTS78tgFbCVMHuniuCHoq3JdflRV3HJRkL_VHYG_c3v6kjOOCDRkDDpe27fuypEw2_qBIigrh-l7KCmEDDwLeJvRBgqIRvjevH_ZeVJpq_0xI/s1600/tick+list+style.png");
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=9;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>   

# Random Post dengan Thumbnail dan Judul Artikel

Klik show untuk melihat

<style>
<!--
#random-posts img{float:left;margin-right:5px;border:1px solid #999;background:#FFF;width:40px;height:40px;padding:4px}
-->
</style>
<ul id='random-posts'>
<script type="text/javascript">
var rdp_numposts=5;var rdp_snippet_length=100;
var rdp_info='no';
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)+"&#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="https://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" title="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" alt="'+rdp_posttitle+'" title="'+rdp_posttitle+'">'+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>

# Random Post Multi Warna Keren

Klik show untuk melihat

<style type="text/css">.noop-random-posts ul li { list-style-image:none;}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}list-style-type: none;margin: 0;padding: 5px 0;}.noop-random-posts ul li {border: 0 none;margin: 5px 0;padding: 10px;position: relative;}.noop-random-posts ul li:first-child {background: none repeat scroll 0 0 #FF4C54;width: 97%;}.noop-random-posts ul li:first-child:after {content: "1";}.noop-random-posts ul li:first-child + li {background: none repeat scroll 0 0 #FF764C;width: 87%;}.noop-random-posts ul li:first-child + li:after {content: "2";}.noop-random-posts ul li:first-child + li + li {background: none repeat scroll 0 0 #FFDE4C;width: 84%;}.noop-random-posts ul li:first-child + li + li:after {content: "3";}.noop-random-posts ul li:first-child + li + li + li {background: none repeat scroll 0 0 #C7F25F;width: 81%;}.noop-random-posts ul li:first-child + li + li + li:after {content: "4";}.noop-random-posts ul li:first-child + li + li + li + li {background: none repeat scroll 0 0 #33C9F7;width: 78%;}.noop-random-posts ul li:first-child + li + li + li + li:after {content: "5";}.noop-random-posts ul li:first-child + li + li + li + li + li {background: none repeat scroll 0 0 #7EE3C7;width: 75%;}.noop-random-posts ul li:first-child + li + li + li + li + li:after {content: "6";}.noop-random-posts ul li:first-child + li + li + li + li + li + li {background: none repeat scroll 0 0 #F6993D;width: 72%;}.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {content: "7";}.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {background: none repeat scroll 0 0 #F59095;width: 69%;}.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {content: "8";}.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {background: none repeat scroll 0 0 #C7F25F;width: 66%;}.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {content: "9";}.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {background: none repeat scroll 0 0 #353535;border-radius: 50% 50% 50% 50%;color: #FFFFFF;font-size: 25px;height: 30px;position: absolute;right: -17px;text-align: center;top: 1px;width: 30px;}.noop-random-posts ul li a {color: #444444;font-size: 13px;text-decoration: none;}</style><div class="noop-random-posts"><script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=5;function nooprandomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

3. Setelah memilih salah satu dari 3 widget random post cantik tadi, jangan lupa untuk men-save.

Selanjutnya ; Cara membuat Daftar Isi Keren Otomatis Kompi Ajaib