Cara Membuat Widget Popular Post Keren, Simple, dan Elegan

Cara Membuat Widget Popular Post Simple dan Elegan - Popular Post atau yang dikenal dengan artikel yang paling sering dibaca pengunjung adalah widget yang menampilkan artikel populer di blog atau website. Popular Post default dari blogger akan terlihat sederhana dengan background putih. Namun, anda bisa merubahnya dengan popular post keren berwarna agar tampil lebih segar dimata pengunjung.

Dan pada kali ini saya akan share cara buat widget popular post simple namun elegan dan keren dengan berbagai model yang elegan untuk mempercantik tampilan blog, mulai sari popular post full colour atau warna keren lainnya di blogger blogspot.

Dua Widget Popular Post Keren Namun Simple

1. Default Popular Post With Number

Cara Membuat Widget Popular Post Simple dan Elegan
/* Popular Post */.popular-posts ul {padding-left: 0px;counter-reset: popcount;}.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #292D30;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #666666; }.popular-posts ul li {border-bottom: 1px dashed #dddddd;}.popular-posts ul li:hover {border-bottom: 1px dashed #696969;}.popular-posts ul li a {text-decoration:none; color:#5A5F63;}.popular-posts ul li a:hover {text-decoration:none;}

2. Simple and Elegan
Cara Membuat Widget Popular Post Simple dan Elegan

/*--- Genera Popular Posts --- */    .popular-posts ul{padding-left:0px;}    .popular-posts ul li {    background: url("http://4.bp.blogspot.com/-7CHpNrL3BIY/UQFD2sPq6LI/AAAAAAAAI8E/Jibvq813XCE/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);    list-style-type: none;    margin: 0px 0px 5px;    padding: 5px 5px 5px 20px !important;    border: 1px solid #dddddd;    border-radius: 10px 10px 10px 10px;    }    .popular-posts ul li:hover {    border:1px solid #666666;    }    .popular-posts ul li a:hover {    text-decoration:none;    }

Cara Memasang Widget Popular Post di Blog

Cara memasangnya cukup mudah sekali, kalian bisa ikuti langkah-langkah berikut :

  • Pilih salah satu kode popular post diatas
  • Masuk ke akun blogger dan pilih menu Template => Edit HTML
  • Lalu cari kode ]]></b:skin> lalu tempatkan kode popular post yang sudah kalian pilih diatas kode ]]></b:skin>
  • Terakhir save template dan lihat hasilnya.

Masih banyak lagi kode yang keren untuk mempercantik popular post, namun disini saya hanya share dua saja karena menurut saya popular post ini cukup keren dan enak dilihat.

Demikian cara buat popular post keren.

0 Response to "Cara Membuat Widget Popular Post Keren, Simple, dan Elegan"

Post a Comment

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan