Popular Post Widget With Flat UI Style

Popular Post Widget With Flat UI Style - Hai sobat newbanie blog, kali ini saya kembali dengan tutorial  memodifikasi widget popular post. Tutorial ini hanyalah tutorial sederhana, jadi seorang pemula pun dapat dengan mudah memahaminya.

First Step!
Buat dulu widget popular postnya.
Jangan centang "Tampilkan cuplikan" atau "thumbnail gambar"

Second Step!
Template -> Edit HTML
Letakkan kode berikut diatas ]]></b:skin>  atau </style>

.PopularPosts h2{
padding-right:.4em;
padding-left:1em
} 
.popular-posts ul {  padding-left: 0; 
  counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li {  
border-bottom: 1px solid #f0f0f0;  
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;/*setting counter-increment*/
  }
.PopularPosts ul li:before{
content: counters(trackit, ".");
padding: 0 .1em 0 0;
font-size: 20px;
font-weight: bold;
color: #C4C4C4;
float:left;
margin-right:10px;
} /* creates counter before lists */

.PopularPosts li:first-child{
border-top:1px solid #f0f0f0
} /* define background for even number lists */

.PopularPosts li:nth-child(odd)
{background:#f5f5f5
}/* define background for odd number lists */

.PopularPosts .item-thumbnail, .PopularPosts .item-snippet {  
display: none!important}/* Hides Thumbnail and Snippet */

.PopularPosts a, .PopularPosts a:hover{
color:#959595;
font-size:.9rem
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}
.widget.PopularPosts{padding:1.2em 0em !important} 

Save Template! And done :)

Tweet