Membuat Popular Post Terbaru

Membuat Popular Post Terbaru - Popular Post MerupakanHal Yang Cukup Penting Untuk Struktur Blog, Karena Artikel Populer Akan Mendapat Perhatian Dari Pengunjung Blog , Terlebih Style Widget Popular Post Berbeda Dari Yang Biasanya Atau Unik .

Kali Ini Saya Akan Memberikan Tutorial Widget Untuk Mengubah Penampilan Popular Post , Untuk Lebih Jelasnya Lihat Demonya Siapa Tau Cocok Untuk Template Sobat

VIEW DEMO

Cara Membuat Popular Post Terbaru

1 . Login Ke Blogger.com Anda
2 . Klik Template > Edit Template Dan Cari Kode ]]></b:skin> Lalu Simpan Kode Dibawah Ini Tepat Di Atas Kode Ini ]]></b:skin>

.popular-posts ul li a {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #444444;
    display: block;
    margin: 0 0 0.5em;
    padding: 0.4em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #CCCCCC;
    font-weight: 700;
    height: 2em;
    left: -2.5em;
    line-height: 2em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2em;
}
.popular-posts ul li a:after {
    border: 0.5em solid transparent;
    content: "";
    left: -1em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
    background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
    border-left-color: #CCCCCC;
    left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}

 3 . Save Template Dan Lihat Hasilnya

Notice :

- Untuk Warna #DDDDDD Dan Ukuran Anda Sesuakan Sendiri =D

Sekian Tutorial Membuat Popular Post Terbaru . Semoga Ber Manfaat Bagi Kalian =D Hehhe