ANEUK MUMANG - Ok berikut ini saya akan membagikan lagi widget popular post untuk Blogger. Jadi untuk anda yang mungkin sudah bosan dengan tampilan popular post yang ada di template blog anda maka berikut ini kami akan membagikan tutorialnya kepada anda.
Lanjut langkah-langkah berikuut ini.
- Login akun blogger Anda.
- Letakan CSS di bawah ini kedalam Css di template blog sobat, atau cari kode ]]></b:skin> (CTRL+F)
- Letakan kode dibawah ini diatas ]]></b:skin>
.PopularPosts {
width:100%;
margin: 0 auto;
padding: 0!important;
border-radius: 2%;
-moz-border-radius: 2%;
-webkit-border-radius: 2%;
counter-reset: trackit;
box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-webki-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
border: 1px solid #EEE;
}
.PopularPosts h2 {line-height:1.5em!important;display: block!important;font-family: "Calibri","Droid Sans",Tahoma,Geneva,sans-serif;font-weight: 500!important;
text-transform: uppercase!important;padding: 5px 10px!important;margin: 0!important;color: #D1D9E5;background-color: #5A77A0!important;text-shadow: 1px 1px #486286;border-bottom: 1px solid #4D678C;
box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 5px 12px -7px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);
font-size: 16px!important;
border-top-right-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 3px;
-webkit-border-top-right-radius: 3px!important;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 3px;
bottom:0;
top:0;
}
.widget-content.popular-posts {border-top: 1px solid #CCC;padding: 0em;margin: 0 0 0;
}
.popular-posts ul{padding:0!important;margin:0!important;}
.popular-posts ul li {
border-bottom: 1px solid #f1f1f1;
list-style: none outside none !important;
margin-left: 0 !important;
overflow: hidden;
padding: 10px 0 !important;
transition: all 0.25s linear 0s;
counter-increment: trackit;}
#PopularPosts1 li:nth-child(odd) {background: #F9F9F9;}
#PopularPosts1 li:nth-child(even) {background: #FFF;}
#PopularPosts1 li:first-child {border-top: 1px solid #f1f1f1;}
#PopularPosts1 li {padding-right: 1em !important;padding-left: 1em !important;}
#PopularPosts1 ul li:before {content: counters(trackit,".");padding: 0 .1em 0 0;font-size: 20px;font-weight: bold;color: #D8D8D8;float: left;}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet {display: none;}
#PopularPosts1 a:hover {text-decoration: underline;}
#PopularPosts1 a {color: #3F3F3F;font-size: .9rem;}
.PopularPosts .item-title {padding: 0 0 .2em 1.5em;}
Lanjut, Save/Simpan -Lihat hasilnya
Semoga sukses
