widget popular post keren warna warni with thumbnails
- Lanjutkan ke bagian Template, Edit HTML, Terus kalian cari kode </head>
- Setelah ketemu, kalian pilih css mana yang mau di pakai untuk membuat tampilan popular post kalian lebih keren...
- Terus kalo udah, tinggal di copy dan masukan css dibawah ini tepat di atas kode </head>
<style type='text/css'>
/* Widget popular Post1 */
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
.popular-posts ul li:nth-child(1){background-color:#f44336;}
.popular-posts ul li:nth-child(2){background-color:#e91e63;}
.popular-posts ul li:nth-child(3){background-color:#9c27b0;}
.popular-posts ul li:nth-child(4){background-color:#673ab7;}
.popular-posts ul li:nth-child(5){background-color:#3f51b5;}
.popular-posts ul li:nth-child(6){background-color:#2196f3;}
.popular-posts ul li:nth-child(7){background-color:#03a9f4;}
.popular-posts ul li:nth-child(8){background-color:#00bcd4;}
.popular-posts ul li:nth-child(9){background-color:#009688;}
.popular-posts ul li:nth-child(10){background-color:#4caf50;}
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>
<style type='text/css'>
/*Popular Post 2*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
.popular-posts ul li:nth-child(1){background-color:#00bcd4;}
.popular-posts ul li:nth-child(2){background-color:#009688;}
.popular-posts ul li:nth-child(3){background-color:#4caf50;}
.popular-posts ul li:nth-child(4){background-color:#8bc34a;}
.popular-posts ul li:nth-child(5){background-color:#cddc39;}
.popular-posts ul li:nth-child(6){background-color:#ffeb3b;}
.popular-posts ul li:nth-child(7){background-color:#ffc107;}
.popular-posts ul li:nth-child(8){background-color:#ff9800;}
.popular-posts ul li:nth-child(9){background-color:#ff5722;}
.popular-posts ul li:nth-child(10){background-color:#795548;}
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>
<style type='text/css'>
/*Popular Post 3*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#fff;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #e0e0e0;position:relative;}
.popular-posts ul li:hover{background-color:#EEE;}
.popular-posts ul li a{color:#424242;text-decoration:none;}
.popular-posts ul li a:hover{color:#212121;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>
<style type='text/css'>
/*Popular Post 4*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#212121;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #333;position:relative;}
.popular-posts ul li:hover{background-color:#262626;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>
Nah kalo sudah di pilih dan di save, kalian tinggal atur tampilan popular postnya di bafian tataletak..Silahkan sesuaikan seperti gambar berikut ini...
Nah kalo sudah save dan lihat hasilnya...
