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 aku akan memperlihatkan tutorial cara menciptakan widget popular post atau randompost simple di bloger. Biasanya widget popular post sudah disediakan di default bloggernya sendiri dan dapat 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 dikala di short oleh cursor / pointer.

Apa sih widget random post itu ? widget random post ialah widget yang menampilkan postingan di blog secara acak atau menurut 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 aku 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="Membuat Widget Random Post Di Blogger Simple" 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, biar bermanfaat salam TAMVAN.

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