Membuat Random Post dengan Thumbnail (Diam dan Bergerak)

Sahabat Ngonline06, blog yang bagus adalah blog yang memberikan pelayanan yang prima kepada pengunjung. Salah satu pelayanan yang prima adalah memberikan fasilitas-fasilitas yang memadai, baik berupa widget-widget yang menarik ataupun memberikan jawaban atas pertanyaan dari pengunjung. Salah satu widget yang perlu dan sangat dipertimbangkan adalah widget random post. 

Apa itu widget random post dan Fungsinya?

Widget random post adalah sebuah widget yang menampilkan postingan-postingan kita secara acak. Pentingnya widget ini adalah sama seperti pentingnya widget popular post. Namun antara kedua widget ini memiliki perbedaan yang signifikan, baik dari kemunculannya ataupun target bidikan.

Jika widget popular post itu membidik dan menawarkan pengunjung kepada postingan-postingan kita yang populer dan tentunya diminati oleh banyak orang. Maka, widget random post berbeda dari itu. Widget random post tidak hanya memunculkan postingan yang populer, namun juga yang jarang dikunjungi akan mendapatkan jatah dan kesempatan yang sama dalam kemunculannya.

Ini penting dan sangat penting. Jika populer post cenderung monoton dan bagus untuk pengunjung awal dan tidak relevan bagi pengunjung tetap. Sedangkan widget random post sangat relevan untuk semua pengunjung, baik pengunjung baru ataupun pengunjung tetap kita. 

Mengapa demikian?

Karena widget random post akan memunculkan postingan-postingan yang berbeda-beda saat seorang pengunjung mengunjunginya. Ini berbeda dengan postingan popular post yang bisa dibilang 'itu-itu aja' yang muncul. Jadi dari sini, sahabat paham to pentingnya widget random post.

Dalam tampilannya, widget random post adalah yang berbentuk thumbnail + judul, simpel (judul saja), dan ada juga yang gambar saja. Tentu bentuk ini disesuaikan dengan minat dan kesesuaian dengan template blog sahabat sendiri. Maka pada kesempatan ini, Ngonline06 akan berbagi tentang widget random post dengan thumbnail + judul. Namun jika sahabat ingin mendapatkan widget random post dengan judul saja atau bahkan gambar saja, bisa membaca:

• Membuat Widget Random Post Hanya Gambar
• Membuat Widget Random post Hanya Judul

Ngonline06 pada kesempatan ini akan berbagi widget random post dengan thumbnail dengan 2 bentuk. Bentuk pertama diam, sedangkan bentuk kedua bergerak. Trik ini adalah resep dari seocips.com. Biar sahabat tidak penasaran, langsung saja, berikut adalah tutorialnya.

1. Cara Memasang Random Post dengan Thumbnail

OK, kami kira sahabat sudah paham akan pentingnya widget random post. Maka, berikut adalah cara Memasang Random Post dengan Thumbnail. Jika sahabat ingin melihat bentuk jadinya, sahabat bisa melihat demonya silahkan lihat disini DEMO.  

1. Silahkan sahabat masuk dashboard blog.
2. Klik menu Tata Letak (Rancangan) > Add Gadget (Tambah Gadget).
3. Pilih HTML/Java Script dan tulis kode berikut. Silahkan ganti huruf yang berwarna merah dengan alamat blog sahabat.

<style>
.rp-ngonline6{border:1px solid #ddd;padding: 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}
.rp-ngonline06{border:1px solid #ddd;padding:5px 10px;overflow:hidden;box-shadow: -2px 2px 3px #ddd;background:#fff;border:1px solid #ddd;}
#random-posts img{float:left;margin-right:10px;border:1px solid #ddd;background:#fff;width:65px;height:65px;padding:3px;border-radius:2px;}</style>
</style>
  <div class="rp-ngonline6">
    <div class="rp-ngonline06">
  <!-- start -->
<div id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=60;
var rdp_info='yes';
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=\"http://ngonline06.blogspot.com/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzx17pkm538Cot8AKqQM5usqnODreRRF63sauUYogBVE9ZiNFO148he2c5ty9U7p8GcGrrRqCVKK3cszk6MwSAmB6xIR-JFnLhFYLqdI1vNZCieajGWHrcz5WHItiUBD_G5EHn9ioKvJKx/"}}};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=\"http://ngonline06.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</div>
  <!-- /end -->
</div></div>

2. Membuat Random Post dengan Thumbnail Bergerak

Jika sahabat ingin melihat penampakannya silahkan tekan tombol di bawah ini:

Untuk membuatnya, sama dengan tata cara di awal, yaitu:

1. Silahkan login ke dashboard blog.
2. Klik menu Tata Letak > Tambah Gadget.
3. Pilih HTML/Java Script dan tulis kode di bawah ini.

<style type="text/css">
/*widget*/
#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://ngonline06.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
  <!-- /end -->

Keterangan: huruf yang berwarna merah diganti dengan alamat blog sahabat, huruf yang berwarna biru diganti dengan jumlah postingan yang perlu ditampilkan, sedangkan huruf yang berwarna hijau adalah kecepatan bergerak. Silahkan disesuaikan dengan keinginan sahabat semua.

OK, begitulah Cara Membuat Widget Random Post dengan Thumbnail Diam dan Bergerak. Semoga bermanfaat dan berhasil ya. Salam sukses selalu.