Cara Edit HTML Widget Popular Post Keren Di Blogspot

Selain membuat widget populat post bawaan Blogger, anda juga bisa memasang popular post keren melalui edit HTML.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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

Membuat Blog Keren Menarik

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, 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 berbagai style widget Popular Post yang bisa dipasang di sidebar 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.

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, bila kamu sedang mencoba edit widget sederhana, kali ini Googelio akan mengulas tentang cara membuat dan memasang widget Popular Post dengan edit HTML di template Blogger/Blogspot.

Cara Membuat Widget Popular Post Di Blogspot Dengan Edit HTML

memasang widget popular post di blog

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/AVvXsEh9O1Bf-MxEFXSc8QAqfUWvc4wkXcxyqoJh3IE9ZSzVLA6xo35a8dW2rtLa4Pt6DH9iIKg02_KaXF2mPWFz7I5TJ61CY2jgihWn6h0eb6k4QfWrAE1qOWh7jg9TmtTgWpz5QdmbJS4ZIgM/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/AVvXsEidCTXg-2fZPcZ8X2Q4RoXABVjtVxcF_XWwrJMZlQbzS09yxsQ8cTu53vEbGsqs_ihpxATKgDk-WFptb_Y00SSo565pSQvQvuh9J0TkMhE1M1v06HJ6xaE10V9m8ghDcGXfK-4ZUqotDP0/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.

Getting Info...

6 komentar

  1. remarkable article, I hope to bring benefit to us all the readers
    Greetings ... greetings bloggers
  2. makasih info yang saya cari
  3. sipz
    www.giribig.com
    www.idcheat.com
    www.duniagame.info
  4. Manteeep sob untuk artikelnya :)
  5. Makasih gan untuk tutornya :)
  6. Mantabs Gan,,
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.