Cara Membuat Widget Popular Post - Blog yang menarik dan keren adalah impian semua blogger. Salah satu widget yang bisa membuat tampilan blog terlihat lebih menarik adalah widget Popular Post.
 |
Widget Popular Post Keren Untuk Blogspot Terbaru
Widget adalah salah satu fitur untuk menampilkan sejumlah informasi mengenai sebuah blog. Bila anda sudah pernah memasang widget blogger popular post standar bawaan dari blogspot dan merasa kurang puas dengan tampilan atau desain widgetnya, maka cara berikut ini bisa dilakukan.
Berdasarkan pengalaman sejumlah blogger termasuk saya sendiri dengan memasang widget memberikan dampak tersendiri bagi blognya. Dengan memasang widget khususnya widget Popular Post pada blog jadi terlihat lebih menarik dan lebih informatif sehingga pengunjung blog jadi betah berlama-lama surfing di blog kita.
Ada cukup banyak style widget Popular Post yang bisa disematkan di blog, baik pada bilah/sisi kiri dan kanan blog, atau pada bagian footer. Mulai dari Popular Post berwarna-warni, hingga widget Popular Post animasi.
Cara membuat dan memasang widget Popular Post pun ada beragam trik. Mulai dari menambahkan widget otomatis dari fitur widget yang disediakan Blogger (widget bawaan standar) maupun dari pihak ketiga lainnya.
Cara Membuat Widget Popular Post Keren Di Blogspot Dengan Edit HTML
Sebelum melakukan modifikasi, terlebih dahulu harus log in di blogger menggunakan akun gmail agar bisa masuk ke dashboar blogger. Kalau belum punya akun gmail coba baca artikel Cara Lengkap Membuat Akun Gmail Dengan Mudah dan Cepat.
- Log in di blogger
- Setelah berada di dashboard, apakah anda sudah memasang widget popular post ? Bila belum, lihat pada sidebar kiri pada dashboard, pilih Tata Letak/Lay Out. Setelah itu anda akan masuk pada tampilan tata letak/elemen. Kemudian klik salah satu elemen, apakah di sidebar atau di footer menurut selera anda. Sebaiknya anda memilih pada bagian sidebar saja.
- Setelah anda memilih sidebar untuk peletakan widget, klik Add Gadget.
- Lalu pilih Entri Populer/Popular Post lalu save/simpan.
- Kemudian lihat bilah kiri pada tampilan dashboard anda, lihat Template dan klik. Anda akan masuk pada tampilan format editing template (editor template/template editor)
- Klik Edit HTML, lihat gambar di atas
- Pada form Editor Template, klik CTRL+F untuk mempercepat pencarian. Di kolom tersebut, ketik kode ini, ]]></b:skin> untuk mencari letak/posisi kode tersebut.
- Setelah berhasil menemukan kode di atas, copy kode berikut ini :
<style>.popular-posts ul{padding-left:0px;}.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWxde83AoDLeduwLy4ivbwW84YTu8_vp2xSJLWrIZXGBWaQqsUT2YgsH2902FeCoXVsygu2MrXvFlxGPgDjpVtAneVaxU_K1Xgxx6oOVed87-apA11W3HTA-2EVj3lfZglUAihJ0L3FZ0/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;list-style-type: none;margin: 0 0 5px 0px;padding: 5px 5px 5px 33px !important;border: 1px dashed #dddddd;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;}.popular-posts ul li:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaimNLejyknsGu8TMJb8dh7BCPmdLtRgD1uHWzE6BzmoOmTkkBj7DXCfhEWaoJna9VVs_TELuQLZSndANcPaTZuBtdZPFKsrZJjoJs5GFPmA2SSkjRAqwz9gXkVAWQdNUH_mGk9l8rS1E/s1600/rb+mark+icon...jpg) no-repeat 2px;border: 2px solid #b60000;-moz-border-radius: 8px;-webkit-border-radius: 8px;}.popular-posts ul li a:hover {text-decoration:none;}</style>
Pastekan kode tersebut di atas kode ]]></b:skin>
Selanjutnya segera save.
Hasilnya bisa anda lihat pada tampilan homepage. Bila anda kurang puas dengan ukuran, tebal border maupun jarak antar sisi dan antar daftar postingan (margin dan padding) anda bisa mengeditnya kembali dengan cara yang sama.
Itulah cara membuat widget popular post. Selamat mencoba.
