Business

Membuat Widget Popular Post V2 di Blog

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

GusNur SH

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment