Modifikasi Tampilan Widget Popular Post di Sidebar Blog

Baca Juga

Cara Mempercantik Desain Tampilan Widget Popular Post di Sidebar Blog

WIDGET popular posts (posting terpopuler, entry terpopuler, artikel terpopuler) merupakan salah satu navigasi menu dan internal link.

Berisi daftar tulisan yang paling banyak dibaca (dikunjungi), widget posting terpopuler ini harus diperlakukan istimewa karena menjadi unggulan konten blog kita, juga biar bikin penasaran pengunjung untuk membukanya.

Banyak sekali model atau gaya widget populer post, mulai dari yang sederhana bawaan blogger (default), hingga yang warna-warni. Googling aja dengan kata kunci "Popular Post Widget Style", maka akan muncul banyak kode dan tutorial membuatnya.

Saya share di sini salah satu, setelah saya modif, menjadi widget populer post sebagaimana saya pasang di sidebar blog ini.

Cara Mempercantik Desain Tampilan Widget Popular Post

1. Template > Edit HTML
2. Copy & Paste kode berikut ini di atas kode ]]></b:skin> atau </style>

/* Simple Stylish Popular Post Widget */
#PopularPosts1 h2{position:relative;padding:8px 10px 6px 10px;width:100%;margin-bottom: 5px;font-size:17px;color:#757575; text-align:left;}
#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:90%;margin:0 15px}
#PopularPosts1 li{ width:100%;position:relative;left:0;margin:0 0 1px 12px;padding:4px 5px;}
#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #777; height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff;font-size: 14px;}
#PopularPosts1 ul li:after{position: absolute;content: '';left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:10px solid #777;
/* background color of the right arrow*/}
#PopularPosts1 ul li a{color:#282b2b;text-decoration:none;font-size:14px;font-weight: 400;}
#PopularPosts1 ul li {position: relative;display: block;padding: .4em .1em .4em .8em;*padding: .4em;margin: .5em 0 .5em 0.4em;background: #fafafc;transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}
#PopularPosts1 ul li:hover{background: #eee; /* Background color on mouseover */}  
#PopularPosts1 ul li a:hover{color:#444; /* Link color on mouseover */margin-left:3px;}

3. Save template!



SETTING
Setelah kode terpasang,  jika widget popular post belum ada, maka pasang dulu, dengan cara
- "Layout" > Add a Gadget > pilih Popular Posts
-  Lakukan setting seperti gambar di bawah ini: Di Bagian "Show" jangan centang apa pun!

Anda bisa mengubah warna dan ukuran huruf dan lainnya untuk kian memperindah tampilan widget popular post di sidebar blog ini. (http://blogromeltea.blogspot.com/).*