Membuat Widget Popular Post V2 di Blog

Cara Pertama : Membuat Widget Popular post

• Login Ke Blogger
• Pergi ke Menu ''Tata Letak''
• Klik ''Tambah Gadget''
• Cari gadget ''Entri Populer'', dan atur Settinganya Seperti ini : Jangan Ceklis thumbnail gambar dan cuplikan

Cara Ke dua : Memasang Kode CSS

• LOgin Ke Blogger
• Pergi Ke Menu ''Template''
• Klik ''Edit HTML''
• Cari kode ]]></b:skin setelah ketemu kodenya Masukan kode dibawah ini diatas kode tadi

/* Popular Post Customization */

.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"}

/* Popular Post Customization */

• Setelah Selesai, Simpan Templatenya

Demikianlah artikel Ini Mudah Kan ? Semoga artikel ini Bermanfaat dan mudah untuk di Pratekkan dan Silakan Komentarin artikel Di kolom komentar dibawah ini..

SHARE

Unknown

• 
• 
• 
• 
•