logo blog

Membuat Widget Random Post Di Blogger Simple

Membuat Widget Random Post Di Blogger Simple

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.

Baca juga tutorial menarik lainnya di blog saya ini :)



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!!

banner blogger kiri kanan
  • 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 :)

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Membuat Widget Random Post Di Blogger Simple. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Membuat Widget Random Post Di Blogger Simple. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

1 comment

Duta APK

Kalau buat yang kayak gini itu gimana ya gan, ada efeknya juga 'double click to select'? https://4.bp.blogspot.com/-jGndJyhuaxc/WAOp8yY1umI/AAAAAAAAARk/n3-B7wrHPGIijDNPWFxnB2WGF_I5UlsPQCLcB/s1600/mas.png

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon