Cara Membuat Random Post Keren di Blog

Cara Membuat Widget Random Post Keren di Blogspot – Artikel acak atau yang dikenal dengan Random Post adalah widget yang akan menampilkan beberapa artikel secara acak. Widget random post merupakan widget buatan sendiri karena pada default widget blogger tidak ada, karena hanya menampilkan popular post saja.

Dengan memasang random posts di blog, maka artikel postingan terdahulu dapat kembali terlihat oleh pengunjung. sehingga artikel lama bisa dengan mudah terlihat dan terbaca. Memasang random post dirasa penting agar postingan kita secara acak ditampilkan mulai dari postingan baru dan lama, ini tentu bisa menambah page view yang nantinya bermanfaat buat blog juga untuk pengunjung mendapatkan informasi berkualitas.

Advertisement

Nah, kali ini saya akan memberikan Cara Membuat Random Post Keren dengan thumbnail di blog atau yang dikenal random post dengan gambar. PenaIndigo memiliki tiga versi random post yang dapat anda piih sesuai dengan selera.

Baca juga: Cara Membuat Recent Post Keren di Blog

Membuat Widget Random Post dengan Gambar di Blog

Berikut beberapa koleksi random post PenaIndigo yang dapat anda pasang pada sidebar blog, cara passang disidebar sebagai berikut:

1. Masuk akun blogger anda.
2. Lalu pilih¬† menu “Tata Letak” kemudian “Tambahkan gadget”, silahkan pilih “HTML/JavaScript”.
3. Setelah terbuka, masukkan salah satu kode Random Post berikut sesuai dengan pilihan anda.cara memasang random post di blog

# Random Post Versi 1random post keren gambar samping kanan

Random post yang pertama ini dengan tampilan gambar disebelah kanan, sehingga judul post sebagi perhatian pertama saat dilihat. jika anda suka silahkan gunakan kode berikut:

<style>
.rp-penaindigo{padding: 0px;overflow:hidden;}
.rp-penaindigo2{padding:0 0px;overflow:hidden;}
#random-posts img{display:block;margin:0px 0px 0px 10px;;margin-right:0px;padding:0;width:62px;height:62px;border:1px solid #f5f5f5;overflow:hidden;float:right;border-radius: 8px !important;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin: 0px 0px 7px;padding: 0px 0px 7px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<div class="rp-penaindigo">
<div class="rp-penaindigo2">
<!-- start -->
<div id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=60;
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="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="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"></script>')};
</script>
</div>
<!-- /end -->
</div></div>

 

# Widget Random Post Keren Versi 2 (Gambar Bulat)cara membuat random post keren gambar bulat

Random post dengan gambar bulat sebelah kanan akan menghiasi blog anda, juga akan membuat menarik perhatian pengunjung sehingga tertarik untuk membaca artikel acak di blog anda.  Jika ssuka dengan versi 2 ini, silahkan pasang di blog dengan kode berikut:

<style>
.rp-penaindigo{padding: 0px;overflow:hidden;}
.rp-penaindigo2{padding:0 0px;overflow:hidden;}
#random-posts img{display:block;margin:0px 0px 0px 10px;;margin-right:0px;padding:0;width:62px;height:62px;border:1px solid #f5f5f5;overflow:hidden;float:right;border-radius: 35px !important;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin: 0px 0px 7px;padding: 0px 0px 7px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<div class="rp-penaindigo">
<div class="rp-penaindigo2">
<!-- start -->
<div id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=60;
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="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="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"></script>')};
</script>
</div>
<!-- /end -->
</div></div>

 

# Widget Random Post Keren Versi 3cara membuat random post keren dengan gambar

Pada versi 3 ini yang sering dipakai oleh blogger yaitu dengan tampilan gambar disebelah kiri dan judul post disebelah kanan, namuan tentu sesuai dengan selera anda untuk memilih tampilan random post pada bagian sidebar anda.

Jika anda suka dengan tampilan random post versi 3 ini, silahkan ambil kode berikut:

<style>
.rp-penaindigo{padding: 0px;overflow:hidden;}
.rp-penaindigo2{padding:0 0px;overflow:hidden;}
#random-posts img{display:block;margin:0px 10px 0px 0px;padding:0;width:62px;height:62px;border:1px solid #f5f5f5;overflow:hidden;float:left;border-radius: 8px !important;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin: 0px 0px 7px;padding: 0px 0px 7px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<div class="rp-penaindigo">
<div class="rp-penaindigo2">
<!-- start -->
<div id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=60;
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="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="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"></script>')};
</script>
</div>
<!-- /end -->
</div></div>

 

Keterangan:
Angka yang berwarna merah adalah jumlah random post yang ditampilkan, bisa anda rubah sessuai dengan kebutuhan.

Baca juga: Cara Membuat Popular Post Warna-Warni di Blog

Bagaimana mudah kan buat random post? pilih salah satu 3 versi diatas untuk tampil di blog anda. Demikian informasi tentang membuat random post semoga dapat bermanfaat, menambah cantik tampilan blog juga artikel postingan yang lama dapat terbaca pengunjung dengan baik.

Salam Blogger.

Leave a Reply