Popular Post Numbered

Merubah Sidebar Popular Post Dengan Nomor
Widget sidebar popular post merupakan widget yang menunjukan artikel populer pada blog. Berikut ini cara merubah sidebar Popular Post menjadi nomor, demonya kira-kira seperti pada gambar dibawah.

Tutorial Merubah Sidebar Popular Post menjadi nomor
Buka dasboard blog ▬►Template ▬►Edit HTML
Kode CSS berikut diletakan di atas </head> template blog sobat
atau hapus kode awalan <style type='text/css'> dan akhir </style> lalu letakan kode CSS tsb tanpa kode <style type='text/css'> dan </style> di atas ]]></b:skin> template sobat

CSS Sidebar Popular Post Blog Numbered

<style type='text/css'>
.popular-posts ul li a {
    background: none repeat scroll 0 0 #40BFE1;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: &quot;10&quot;;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: &quot;9&quot;;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: &quot;8&quot;;
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: &quot;7&quot;;
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: &quot;6&quot;;
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: &quot;5&quot;;
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: &quot;4&quot;;
}
.popular-posts ul li:first-child + li + li a:before {
    content: &quot;3&quot;;
}
.popular-posts ul li:first-child + li a:before {
    content: &quot;2&quot;;
}
.popular-posts ul li:first-child a:before {
    content: &quot;1&quot;;
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
}
</style>

Kode warna
#40BFE1
#FFFFFF  
#2DB3E9
#FFFFFF
#CCCCCC
dapat sobat ganti sesuai selera masing-masing.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul Popular Post Numbered. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.https://blogtuz.blogspot.com/2015/03/popular-post-dengan-nomor.html

• Share
• Share
• Share
• Share
• Share

✚

Related Post