4 Widget Popular Post Keren Berwarna Di Blogger

Membuat Widget Popular Post Keren Di Blogger Dengan 4 Style Warna Warni Simple

Cara Merubah Tampilan Widget Popular Post Lebih Keren Dan Berwarna Dengan 4 Pilihan Style css. Kali ini aku akan membuatkan tutorial yang simple untuk membuat tampilan widget popular post di blog menjadi berwarna warni...

Widget popular post ini di lngkapi dengan image / gambar yang menciptakan tampilannya lebih elegan, menarik mungkin dapat di sebut flat ui...

Sebelumnya aku juga sudah pernah share artikel wacana widget popular post dengan 5 style dan tampilan posisi image yang berbeda2.. bagi kalian yang ingin melihatnya, silahkan liat di artikel berikut ini...
New Best 5 Style Widget Popular Post Blogger

Untuk tutorial cara pembuatan widget popular post ini, dapat ikuti langkah-langkah berikut ini..

widget popular post keren warna warni with thumbnails

• Login ke blogger.com

• Lanjutkan ke bab Template, Edit HTML, Terus kalian cari instruksi </head>

• Setelah ketemu, kalian pilih css mana yang mau di pakai untuk menciptakan tampilan popular post kalian lebih keren...

• Terus kalo udah, tinggal di copy dan masukan css dibawah ini sempurna di atas instruksi </head>

• Demo Widget popular Post 1

 <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> 

• Demo Widget popular Post 2

 <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> 

• Demo Widget popular Post 3

 <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> 

• Demo Widget popular Post 4

 <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 ibarat gambar berikut ini...


Nah kalo sudah save dan lihat hasilnya...

Cukup sekian dan terima kasih, biar artikel wacana cara menciptakan widget popular post keden di blog dengan warna ini bermanfaat ya :)