Terbaru »

[Blogging] Membuat Widget Popular Post Lebih Menarik

Penulis : di 17:11


Setelah memadukan beberapa style dan coba-coba akhirnya saya bisa membuat widget populer post dengan tampilan yang berbeda dari widget bawaannya blogspot. Tampilan pada widget popular post yang akan saya sharing kali ini akan mirip dengan widget komentar yang saya buat kemarin, bila ingin mengganti sekalian widget recent komentar anda silahkan kunjungi Membuat Widget Recent Komentar Bagus Dan Menarik.

Sekarang saya akan memulai tutorial cara membuat Widget Populer Post yang berbeda.
Langkah pertama silahkan login ke akun blogger anda seperti biasanya. kemudian di tampilan antarmuka pilih Tata Letak tambahkan gadget popular post dan silahkan sesuaikan dengan selera anda sendiri untuk banyaknya postingan yang akan muncul dan jangan lupa centang untuk bagian Thumbnail gambar dan Cuplikan lalu Simpan.

Selanjutnya pindah ke bawahnya Tata Letak yaitu Template dan pilih edit HTML kemudian copy kode css dibawah ini sebelum kode ]]></b:skin>

/* Popular Post */
.item-thumbnail img {height: 40px;width:40px; padding:3px; border:1px solid #ddd; float:left; margin-right:5px; -webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.popular-posts {margin: 0 0 10px 0;border:1px solid $bordercolor;}
.popular-posts ul {float: left;list-style: none;height:auto;}
.popular-posts ul li {height: 45px;margin:5px 5px 5px 5px;float: left;overflow:hidden;border:1px solid #ddd;}

Setelah anda copy kode diatas selanjutnya simpan template dan lihat hasilnya di blog anda, mudah dan simpel kan. Sekian dulu dan semoga artikel ini bisa bermanfaat bagi sobat bloger lainnya. Untuk contohnya bisa dilihat dibawah ini:

Selamat Mencoba...
Share ke temanmu : :

5 komentar:

Luthfi All said...

harus tambah gadget dulu atau itu bisa langsung dipakai kak???
Thanks

Unknown said...

itu modifikasi dari gadget populer post bawaannya blogspot..

Uem Cuters said...

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

Anonymous said...

gan liat nieh di sini Newest DOWNLOAD

tutorial agan sempurna ... dan berhasil .. makasih

Unknown said...

makasih Mas Bro

#MAHASISWA GO BLOG

Post a Comment

Terima kasih sudah berkunjung
Komentar yang berkualitas saya harapkan dari para pengunjung situs ini
(Karena banyaknya komentar yang masuk spam, sebaiknya gunakan nama untuk memberikan komentar)

 
Copyright © 2012. CingheDotCom - All Rights Reserved - About Me | Contact Us | Kebijakan Privasi