Cara Membuat Popular Post Keren dan Berwarna (Update) ~ Males Banget

tips dan cara pasang atau membuat widget popular post jadi keren dan berwarna di blog ialah dengan memodifikasi widget popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilan widget popular post di blog menjadi lebih menarik untuk dilihat. Berikut ini cara buat atau pasang widget popular post/artikel populer di blog:

Cara-nya sangatlah mudah, hanya dengan menambahkan kode css di template blog Anda. Disini saya sediakan beberapa style yang bisa Anda pilih sesuai keinginan.

cara buat atau pasang widget popular post/artikel populer di blog

1. Anda login ke akun blogger Anda
2. Kemudian Tambahkan Gadget >> Entri Populer, lalu Anda atur agar popular post hanya menampilkan judul saja.

3. Anda copy salah satu kode css di bawah ini dan taruh di atas kode ]]></b:skin> atau </style> dan Simpan.

STYLE 1 ( demo pada blog ini)

/*Custom 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;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:11px}

Semoga Bermanfaat . . . !!!

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Males Banget