Cara Mudah Menampilkan Widget Random Post di Blog

Trik yang akan Kang Wira ulas berikut ini adalah Trik tentang Menampilkan Widget Random Post Di Blog yang sudah pernah diulas oleh beberapa blogger lain.

Tapi disini saya belajar mengedit sedikit CSS yang saya tulis pada Syntax dalam halaman ini.

Namun sesuai dengan judul, pastinya teman-teman ingin tau hasilnya terlebih dulu agar bisa langsung dipraktekkan pada blog pribadi kamu.

Nah dibawah ini adalah contoh Hasil Widget Random Post yang sudah saya edit sedikit CSS nya.

Nah Tips Cara Menambahkan Widget Random Post ini sangat mudah teman-teman. Kamu cukup menambahkan widget HTML/JavaScript yang sudah disediakan oleh platform blogger.

Dan bagi teman-teman yang belum paham caranya, silahkan ikuti langkah-langkah berikut ini.

Login ke akun Blogger kamu
Pilih Blog yang akan kamu modif
Lalu pilih tata letak dan pilih Tambahkan Gadget
Akan muncul jendela baru dengan list widget yang bisa kamu tambahkan kedalam blog kamu
Pilih HTML/JavaScript
Salin Kode dibawah ini

<style>
.rp-kangwira{border:1px solid #ddd;padding: 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}
.rp-kangwira1{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>
  <div class="rp-kangwira">
    <div class="rp-kangwira1">
  <!-- 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://www.kangwira.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/AVvXsEgyEsE0RoyUGxdcQVYumP6_wfqix5mAukq-8KVjWKrA2P5q3nl1yPPsxz4ZY1uh2cL4TLDtRvpj6DJ2itrSbb9Cewp_884WpM2oTUpYx08Z-3agiI2v5f7VS6h8CwI_CVp6nEgLSqHnraTh/"}}};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://www.kangwira.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>

var rdp_numpost=5; --> ini adalah jumlah artikel yang akan kamu tampilkan,
var rdp_snippet_length=60 --> jumlah kata pada deskripsi artikel yang akan kamu tampilkan
var rdp_info='yes' ---> informasi mengenai waktu pembuatan artikel tersebut

Setelah itu klik Simpan dan lihat hasilnya

Apakah hasilnya sama dengan Image Default pada Artikel ini? Jika jawaban kamu adalah "SAMA", berarti kamu berhasil menampilkan widget random post kedalam blog kamu.

Apabila teman-teman ingin sedikit memodifikasi kode diatas, silahkan baca catatan dibawah ini agar tidak terjadi kesalahan saat menyimpan widget.

Nah demikian lah artikel ini saya buat sambil menunggu waktu untuk berbuka puasa hari ini.

Saya berharap Artikel Cara Mudah Menampilkan Widget Random Post di Blog ini bisa menjadi salah satu artikel yang kamu butuhkan untuk menambah peringkat SEO dalam blog kamu.

Jika kamu kesulitan dalam menerapkan kode Random Post diatas, kamu bisa tuliskan pertanyaan-pertanyaan kamu di kolom komentar dibawah ini.