Cara Memodifikasi Popular Post Keren dengan Efek CSS di Blog
- Sekarang masuk menu Template --> Pilih edit HTML
- Klik Ctrl+F dan cari kode ]]></b:skin>
- Kemudian letakkan kode CSS berikut diatas kode ]]></b:skin>
/* CSS Popular Posts WWW.PINTUSEO.BLOGSPOT.COM*/
.PopularPosts .widget-content ul{padding-right:17px!important;list-style-type:none;}
#PopularPosts1 ul li .item-thumbnail{float:left;margin-right:10px;padding:2px;background:#444;transition:all 1s ease-out;animation:BounceRate 3s;}
#PopularPosts1 ul li .item-thumbnail:hover{background:#f35d5c;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 10px 10px 10px !important}
.PopularPosts .widget-content ul li:first-child{background:#616161;width:100%}
.PopularPosts .widget-content ul li:first-child:after{content:'1st'}
.PopularPosts .widget-content ul li:first-child+li{background:#555;width:100%}
.PopularPosts .widget-content ul li:first-child+li:after{content:'2nd'}
.PopularPosts .widget-content ul li:first-child+li+li{background:#616161;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li:after{content:'3rd'}
.PopularPosts .widget-content ul li:first-child+li+li+li{background:#555;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li:after{content:'4th'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li{background:#616161; width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li:after{content:'5th'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li{background:#626262; width:100%}
.PopularPosts .widget-content ul li:first-child:after, .PopularPosts .widget-content ul li:first-child+li:after, .PopularPosts .widget-content ul li:first-child+li+li:after, .PopularPosts .widget-content ul li:first-child+li+li+li:after, .PopularPosts .widget-content ul li:first-child+li+li+li+li:after, .PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after, .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after, .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after, .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after, .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{position:absolute;bottom:1px;right:1px; background:#444;padding:5px;width:20px;line-height:1em;text-align:center;color:#eee; font-size:13px !important}
.PopularPosts .widget-content{padding-right:10px}
- Kemudian Simpan Template Anda .
Keterangan
- Kode Berwarna Biru Adalah Warna Background Popular Post & Bisa Di Ganti Sesuka Selera Kalian
Sekian Dari Saya Cara Memodifikasi Popular Post Keren dengan Efek CSS di Blog Semoga Bermanfaat.
keren banget...
BalasHapusnice post.......
BalasHapus