Memasang widget popular post berwarna warni bisa membuat pengunjung di log anda betah berlama-lama, karana mempunyai keunikan dan kendahan yang membuat mata tidak jenuh dan buntu. blog anda tidak suap, dengan adanya Popular Post yang mempunyai banyak warna yang terdapat di sidebar blog anda membuat suasana hidup dan membuat tidak jenuh.
Oke saya tidak panjang lebar, selamat mencoba dan rasakan bagai mana nantinya.
Oke saya tidak panjang lebar, selamat mencoba dan rasakan bagai mana nantinya.
Cara buat:
- Pastikan Popular Post anda seperti biasa.
- Kemudian pada template pilih Edit HTML
- Cari kode ]]></b:skin> gunakan CTRL+F
- Kemudian letakkan kode berikut ini diatasnya.
#PopularPosts1 ul{margin:0;padding:4px 0;list-style-type:none}#PopularPosts1 ulli{position:relative;margin:4px 0;border:0;padding:10px}#PopularPosts1 ulli:first-child{background:#ff4c54;width:90%}#PopularPosts1 ulli:first-child:after{content:"1"}#PopularPosts1 ulli:first-child + li{background:#ff764c;width:87%}#PopularPosts1 ulli:first-child + li:after{content:"2"}#PopularPosts1 ulli:first-child + li + li{background:#ffde4c;width:84%}#PopularPosts1 ulli:first-child + li + li:after{content:"3"}#PopularPosts1 ulli:first-child + li + li + li{background:#c7f25f;width:81%}#PopularPosts1 ulli:first-child + li + li + li:after{content:"4"}#PopularPosts1 ulli:first-child + li + li + li + li{background:#33c9f7;width:78%}#PopularPosts1 ulli:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ulli:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}#PopularPosts1 ulli:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ulli:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ulli:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ulli:first-child:after,#PopularPosts1 ulli:first-child + li:after,#PopularPosts1 ulli:first-child + li + li:after,#PopularPosts1 ulli:first-child + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}#PopularPosts1 img{-moz-border-radius: 130px;-webkit-border-radius: 130px;border-radius: 130px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;padding:4px;border:1px solid #fff !important;}#PopularPosts1 img:hover {border-radius: 0 0 0 0;-moz-transform: scale(1.2) rotate(-711deg) ;-webkit-transform: scale(1.2) rotate(-711deg) ;-o-transform: scale(1.2) rotate(-711deg) ;-ms-transform: scale(1.2) rotate(-711deg) ;transform: scale(1.2) rotate(-711deg) ;}
Kemudian simpan
Semoga berhasil
