Membuat Widget Random Post Di Blogger Simple

Cara Membuat Widget Random Post Di Blogger Simple

Cara Membuat Widget Random Post Simple Di Blogger

Kali ini saya akan memberikan tutorial cara membuat widget popular post atau randompost simple di bloger. Biasanya widget popular post sudah disediakan di default bloggernya sendiri dan bisa juga diatur untuk menampilkan image, title, dan deskripsi dari postnya sendiri. Tapi di widget random post yang mas tamvan bagikan ini hanya menampilkan title atau judulnya saja supaya tampil lebih simple dan elegan ditambah juga title untuk menambah seo pada linknya sendiri, kalau bawaan dari bloggernya tidak ada title pada link ketika di short oleh cursor / pointer.

Apa sih widget random post itu ? widget random post adalah widget yang menampilkan postingan di blog secara acak atau berdasarkan artikel paling popular di baca oleh para pengunjung.

Nah untuk melihat tampilan widget random post yang akan mas tamvan bagikan ini, silahkan lihat demonya di link bawah ini.

Result

Baca juga tutorial menarik lainnya di blog saya ini :)

Tutorial Blogger Lainnya :

• New Best 5 Style Widget Popular Post Blogger

• Cara Membuat Widget Pop Up Card Di Blogger

• Cara Baru Membuat Banner Iklan Blog Melayang Kiri Kanan

Untuk tutorial cara pemasangannya, silahkan ikuti langkah demi langkah dibawah ini.

Cara Membuat Widget Random Post Di Blogger Simple

• Login ke Blogger.com

• Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.

• Contoh, Lihat gambar dibawah!!

• Setelah diklik / dibuka HTML/Javascriptnya, Masukan Script Widget Random Post dibawah ini ke dalam HTML/Javascript.

<style type='text/css'>


#random-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

#random-posts li {
  padding: 0 0 5px 0;
  font-size: 90%;
  margin: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#random-posts li a {
  color: #333;
}

</style>
<ul id="random-posts"></ul>
<script type='text/javascript'>
//<![CDATA[
var homePage = "http://mastamvan.blogspot.com/",
numPosts = 10;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>

Keterangan Script di atas
[1]-> Silahkan Ganti URL http://mastamvan.blogspot.com dengan url blog kalian.
[2]-> Jika template kalian belum mempunyaj ajax jquery libs, silahkan masukan script ini //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js di atas </head>

• Jika semuanya sudah di edit, silahkan save dan lihat hasilnya, semoga bermanfaat salam TAMVAN.

Cukup sekian artikel dari mas tamvan tentang Cara Membuat Widget Random Post Simple di Blog ini, semoga bermanfaat. Seperti biasa, jika ada kesulitan dalam pemasangannya, silahkan bertanya dikolom komentar ya :)