Cara Edit HTML Widget Popular Post Keren Di Blogspot
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.
Baca Juga:Cara Membuat Blog Ramai Pengunjung Tanpa Software.
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.
Baca Juga: Cara Membuat Popular Post Keren Animasi 3 Dimensi
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.
Namun ketika memasang widget-widget ini ada beberapa hal yang harus dipertimbangkan, bahwa dengan membuat banyak widget apalagi yang menggunakan add on dari pihak ketiga akan berdampak pada kecepatan loading blog. Semakin lama loading blog akan berpengaruh pada SEO template blog. Apa hubungannya ? Coba anda baca di Template Blog Yang SEO Friendly.
Oleh karena itu agar blog tetap terlihat menarik namun kecepatan loading blog tetap ringan dan performanya terjaga maka gunakanlah widget yang penting saja, misalnya widget Popular Post ini. Dan sepertinya lebih baik bila membuat atau memasang widget tersebut langsung di templatenya.
Baca Juga: Cara Membuat Widget Popular Post Berwarna
Nah, bagi anda yang sedang coba-coba coding kali ini Googelio akan mengulas tentang cara membuat dan memasang widget Popular Post di template Blogger/Blogspot.
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 :
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(http://1.bp.blogspot.com/-PCZ1mg2a0Bk/UHpxmZVBI3I/AAAAAAAAB9Q/JdPm54-yLkI/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(http://4.bp.blogspot.com/-dAl1D7VgX_g/UHpycJXoLoI/AAAAAAAAB9Y/dPoMTxQ1bfU/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.
Nah, buat sobat yang ingin lebih ahli lagi membuat blog atau website yang lebih menarik, membuat web profesional kamu bisa ikutan kursus website di Jakarta, Depok, Tangerang yang terbaik aja deh. Namanya Kursus Website DUMET School. Kursus Website DUMET School. Ada juga tempat lain yang bisa diikuti yaitu kelas online web developer Harisenin.com
Itulah cara membuat widget popular post. Selamat mencoba.
