Cara Membuat tampilan Populer Post menjadi warna warni dengan 3 Style - Popular Post merupakan salah satu widget yang sangat di andalkan oleh para blogger untuk menarik perhatian para pengujung blog,tidak sedikit para pengujung yang datang ke blog mencari sesuatu yang mereka cari dengan mengklik artikel dari Popular Post tersebut
Maka tidak heran jika banyak para blogger yang membuat berbagi Style untuk popular Post tersebut yaitu salah satu nya membuat widget popular Post ini dengan kaya akar warna sehingga tampilan Popular Post ini di sertai dengan warna warni yang menarik
Widget Popular Post ini di sertai dengan Thumbnail atau gambar halaman yang tampil tentu,namun tergantung kepada pemilik blog apakah image popula post ini mau di sertakan atau tidak,namun saya sarankan apabila memakai popular post dengan warna warni ini Thumbnail dan Title saja yang di tampilkan tanpa harus di sertai dengan Descripsi/snipet
Sehingga dengan begitu tampilan Popular Post ini terlihat menarik,selain itu juga Popular Post ini selain bisa di bilang Menarik dan juga Elegan,Widget Popular Post Warna Warni ini bisa di sebut juga Flat Ui
Style 3
Nah itulah ketiga Widget Popular Post dengan Warna warni yang mungkin dapat anda pilih salah satu nya untuk di pasang di blog sobat,semoga artikel nya bisa membantu sobat blogger dan bisa memanfaat kan ketiga Style Widget Popular Post tersebut,salam blogger
Maka tidak heran jika banyak para blogger yang membuat berbagi Style untuk popular Post tersebut yaitu salah satu nya membuat widget popular Post ini dengan kaya akar warna sehingga tampilan Popular Post ini di sertai dengan warna warni yang menarik
Widget Popular Post ini di sertai dengan Thumbnail atau gambar halaman yang tampil tentu,namun tergantung kepada pemilik blog apakah image popula post ini mau di sertakan atau tidak,namun saya sarankan apabila memakai popular post dengan warna warni ini Thumbnail dan Title saja yang di tampilkan tanpa harus di sertai dengan Descripsi/snipet
Sehingga dengan begitu tampilan Popular Post ini terlihat menarik,selain itu juga Popular Post ini selain bisa di bilang Menarik dan juga Elegan,Widget Popular Post Warna Warni ini bisa di sebut juga Flat Ui
Cara Memasang Widget Popular Post Warna Warni dengan 3 Style
Nah jika anda tertarik dengan Widget Popular Post dengan Tiga Style warna warni ini,untuk penerapan nya bisa anda ikuti langkah-langkah nya di bawah ini- Masuk Ke Dashboard Blogger dengan akun anda
- Setelah itu klik Template yang berada di bagian seblah kiri dashboard blogger
- Kemudian klik Edit Html
- Setelah anda berada di bagian edit html,silahkan anda letakan kode CSS berikut
/* 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;}
/*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 3
.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 img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;}
.PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0 !important;padding:.5em 1.5em .5em .5em !important;
counter-increment:num;position:relative;}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight:bold;color:#000 !important;
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;top:0px;right:0px;padding-right:0px !important;}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:0% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:0% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:0% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:0% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:0% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:0% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:0% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:0% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:0% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:0% !important}
.PopularPosts .item-thumbnail {margin:0 0 0 0;}
.PopularPosts .item-snippet {font-size:11px;}
.profile-img{display:inline;opaciry:10;margin:0 6px 3px 0;}
/*FOOTER*/
#footer-1 .widget {
margin: 30px 0 0 0;
}Nah itulah ketiga Widget Popular Post dengan Warna warni yang mungkin dapat anda pilih salah satu nya untuk di pasang di blog sobat,semoga artikel nya bisa membantu sobat blogger dan bisa memanfaat kan ketiga Style Widget Popular Post tersebut,salam blogger
Previous
Posting Lebih BaruNext
Posting Lama
Posted by , Published at September 19, 2017 and have
0
komentar
