Popular Post atau yang biasa disebut dengan Artikel Populer merupakan salah satu widget yang paling penting dipasang dalam sebuah blog. Karena dengan adanya widget popular post tersebut pengunjung akan lebih bisa memungkinkan untuk menelusuri artikel-artikel yang paling banyak dibaca dalam sebuah blog tersebut. Apalagi jika popular post didesign dengan design yang keren dan penuh warna pastinya juga akan menambah daya tarik atau minat pengunjung untuk membuka artikel tersebut.

Popular Post Design


Untuk membuat design popular post yang keren tersebut caranya sangat mudah, hanya menerapkan CSS Pseudo Element dan nth-child dalam penggunaan CSSnya itu sendiri. Yang lebih kerennya lagi, disini saya menggunakan yang sedang trend saat ini yaitu warna-warna Flat UI Design.

Berikut ini adalah CSS untuk membuat popular post yang keren dan berwarna-warni yang bisa langsung kamu letakkan langsung tepat diatas ]]></b:skin> atau </style>

/*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}
/* Design Warna */
.PopularPosts ul li:nth-child(1){background-color:#c0392b}
.PopularPosts ul li:nth-child(2){background-color:#e74c3c}
.PopularPosts ul li:nth-child(3){background-color:#d35400}
.PopularPosts ul li:nth-child(4){background-color:#e67e22}
.PopularPosts ul li:nth-child(5){background-color:#f39c12}
.PopularPosts ul li:nth-child(6){background-color:#f1c40f}
.PopularPosts ul li:nth-child(7){background-color:#2980b9}
.PopularPosts ul li:nth-child(8){background-color:#3498db}
.PopularPosts ul li:nth-child(9){background-color:#16a085}
.PopularPosts ul li:nth-child(10){background-color:#1abc9c}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Keterangan :


Kamu juga dapat mengubah warna-warna diatas dengan warna yang kamu sukai dengan cara yang cukup mudah yaitu dengan mengganti background-color nya saja.