Cara Membuat Widget Popular Posts Berwarna yang Menarik di Blog

Cara Membuat Widget Popular Post - Sudah kita ketahui, bahwa Blog adalah salah satu sarana atau media untuk berbagi informasi. Nah, bagi sekian banyak orang yang mempunyai blog, mereka memakainya selain untuk berbagi informasi, juga untuk menghasilkan uang dari blog.

Dalam menyajikan informasi kepada pengunjung, biasanya para blogger menggunakan widget popular post (artikel populer) di blog nya. Ini juga termasuk salah satu cara agar pengunjung betah berlama-lama diblog kita sekaligus menaikkan pageview blog.

Pada umumnya widget popular posts diblog terlihat biasa saja, hanya ada dengan warna tulisan pada judul dan background putih. Bagi kamu itu mungkin sudah cukup untuk menaikkan pageview blog dan menahan pengunjung agar mau betah diblog kamu. Namun jika kamu membuat widget popular posts berwarna yang menarik dan keren ini diblog kamu, saya yakin pengunjung akan makin betah diblog kamu. :D

Oh iya, ngomong-ngomong seperti apa demo widget popular posts berwarna itu? Tidak usah jauh-jauh, cukup lihat widgetnya pada sidebar blog ExeLog.

Jika kamu tertarik, mari ikuti saya untuk membuat widget popular post berwarna diblog berdasarkan tutorial dibawah ini. CHECK IT OUT!

Widget Popular Posts Berwarna Keren dan Menarik

1. Buka www.blogger.com > Sign in. Baca artikel ini jika kamu belum mempunyai blog

2. Masuk ke menu Template > Edit HTML

3. Copy kode CSS dibawah ini, dan taruh diatas kode ]]></b:skin>. Jangan lupa setelah itu tekan tombol Simpan Template

/* Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;font-size:15px;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:14px}

4. Setelah itu masuk ke menu Tata Letak > Tambahkan Gadget > Cari widget Entri Populer lalu tambahkan

5. Setting seperti gambar dibawah dan tekan tombol Simpan

6. Posisikan widget popular posts nya sesukamu

Blog kamu jadi terlihat keren dan menarik bukan setelah memasang widget popular posts berwarna ini? Hehehehe.... kalau iya, saya bersyukur bisa membantu teman-teman semua. Oh iya, kode CSS diatas bukan punya saya. Jadi bagi yang merasa pembuat kode CSS diatas komen dibawah ya...

Sekian dari saya tentang Cara Membuat Widget Popular Post Berwarna yang Menarik di Blog, semoga bermanfaat. TERIMAKASIH!

Share :

Terima Kasih Atas Kunjungan Anda!
Judul: Cara Membuat Widget Popular Posts Berwarna yang Menarik di Blog
Ditulis Oleh: Harrys
Jika mengutip harap berikan link yang menuju ke artikel Cara Membuat Widget Popular Posts Berwarna yang Menarik di Blog ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya.

Artikel Terkait