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 saya akan berbagi tutorial yang simple untuk membuat tampilan widget popular post di blog menjadi berwarna warni...Widget popular post ini di lngkapi dengan image / gambar yang membuat tampilannya lebih elegan, menarik mungkin bisa di sebut flat ui...
Sebelumnya saya juga sudah pernah share artikel tentang 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, bisa ikuti langkah-langkah berikut ini..
widget popular post keren warna warni with thumbnails
- Login ke blogger.com
- 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 ulpadding: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 libox-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:hoverbackground-color:#757575; .popular-posts ul li acolor:#FFF;text-decoration:none; .popular-posts ul li a:hovercolor:#EEE; .popular-posts ul li imgwidth: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 ulpadding: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 libox-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:hoverbackground-color:#757575; .popular-posts ul li acolor:#FFF;text-decoration:none; .popular-posts ul li a:hovercolor:#EEE; .popular-posts ul li imgwidth: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 ulpadding: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 libox-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:hoverbackground-color:#EEE; .popular-posts ul li acolor:#424242;text-decoration:none; .popular-posts ul li a:hovercolor:#212121; .popular-posts ul li imgwidth: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 ulpadding: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 libox-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:hoverbackground-color:#262626; .popular-posts ul li acolor:#FFF;text-decoration:none; .popular-posts ul li a:hovercolor:#EEE; .popular-posts ul li imgwidth: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...
Cukup sekian dan terima kasih, semoga artikel tentang cara menciptakan widget popular post keden di blog dengan warna ini bermanfaat ya :)
Comments
Post a Comment