Membuat Widget Random Post Untuk Blog

Menampilkan keseluruhan isi blog kita pada halaman beranda sepertinya sangat tidak mungkin untuk dilakukan. Nah, bagaimana tipsnya agar semua posting bisa ditampilkan? Kita gunakan teknik random post. Cara ini akan menampilkan postingan atau konten blog secara acak, mulai dari postingan lawas hingga yang terbaru.

Selain berfungsi sebagai link cepat agar pembaca / pengunjung bisa mendapat informasi, widget ini akan mempercantik blog kita. Bisa dipasang di sidebar blog / header atau footer. Yuk kita praktekan caranya...

1. Login ke Blogger
2. Pilih Tata Letak
3. Pada tampilan tata letak. silahkan klik Tambahkan Gadget pada sidebar, header atau footer (disesuaikan dengan desain blog Anda)
4. Pilih HTML/Javascript atau fungsional pihak ketiga atau kode lainnya ke blog Anda.
   
5. Copy and paste kode dibawah ini :
   
   

   <style>
   #random-posts img {
   border-radius: 0px;float:left;margin-right:5px;width:100px;height:100px;background-color:#FFFFF;padding:3px;transition: all 0.2s linear 0s;}
   
   #random-posts img:hover {
   opacity: 0.6;}ul#random-posts {list-style-type: none;padding: 0px;}#random-posts a {font-size: 14px;text-transform:capitalize; padding: 0px auto 5px;}#random-posts a:hover {text-decoration: none;}.rp-snippet {font-size: 12px;background: #ffffff; padding: 5px; margin-right: 8px;}#random-posts span {}#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;background: #ffffff;}</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='Comments Disabled';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){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;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/AVvXsEik0xKVrySme0Dy72fUXxUx5ix4gTgtp-hLWHhPzUakt45sANCMr79v0Nf2d6ADF43-5CNygYmr6RNS0Usj08k7gLmKOK2jNwoC7rn89KeuQxKqdElEzcKSMsRxsJmuUn8x3ZDkAnQYaso/s1600/no-image-available.jpg"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<div class="rp-snippet">'+rdp_snippet+'</div><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>
   

Simpan dan lihat hasilnya.

Keterangan :

• #random-posts img ; Untuk mengatur ukuran gambar yang ingin ditampilkan. Ubah angka sesuai tampilan blog teman-teman.
• var rdp_numposts=5; Jumlah post yang ingin ditampilkan
• var rdp_snippet_length=120; Jumlah karakter isi posting, rubah sesuai kebutuhan, bila ingin dihilangkan ganti 120 dengan 'no'
• var rdp_info='no'; ubah dengan 'yes' bila ingin menampilkan keterangan posting ( tanggal dan jumlah komentar )

Previewnya bisa Anda lihat pada blog ini. Terima Kasih
Semoga Bermanfaat