Cara Edit HTML Widget Popular Post Keren Di Blogspot

01 Mei
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.

Membuat Blog Keren Menarik


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

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.

memasang widget popular post di blog
  1. Log in di blogger
  2. 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.
  3. Setelah anda memilih sidebar untuk peletakan widget, klik Add Gadget.
  4. Lalu pilih Entri Populer/Popular Post lalu save/simpan.
  5. Kemudian lihat bilah kiri pada tampilan dashboard anda, lihat Template dan klik. Anda akan masuk pada tampilan format editing template (editor template/template editor)
  6. Klik Edit HTML, lihat gambar di atas
  7. Pada form Editor Template, klik CTRL+F untuk mempercepat pencarian. Di kolom tersebut, ketik kode ini,  ]]></b:skin> untuk mencari letak/posisi kode tersebut.
  8. Setelah berhasil menemukan kode di atas, copy kode berikut ini :
<style>
.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 ini bukan cuma bikin kamu bisa bikin web sendiri, tapi bakal menguasai pembuatan bermacam jenis blog atau website. Udah gitu, Kursus Website DUMET School ini juga Kursus Internet Marketing Terbaik di Jakarta, Depok, Tangerang loh sob. Kamu bakalan menguasai SEO kalau belajar di Kursus Intenet Marketing DUMET School. Harganya juga terjangkau. Coba deh.

Itulah cara membuat  widget popular post. Selamat mencoba.

Share this

Related Posts

Previous
Next Post »

6 Comments

Write Comments
24/7/13 14:37

remarkable article, I hope to bring benefit to us all the readers
Greetings ... greetings bloggers

avatar
24/7/13 15:26

makasih info yang saya cari

avatar
25/9/14 15:24

sipz
www.giribig.com
www.idcheat.com
www.duniagame.info

avatar
17/3/15 08:19

Manteeep sob untuk artikelnya :)

avatar