Membuat Widget Popular Post V2 di Blog ~ Ron1st Blog

Pada Artikel ini saya Akan Bagikan Sebuah Widget Popular Post, Widget ini berwarna Abu abu dan Widget ini Bernomor Pada Urutannya.
Popular Post ini Tidak Mengunakan Gambar Menjadi lebih sederhana, kalau begitu, Langsung kita akan, Mencoba membuatnya dan Tutorialnya seperti ini

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 */