Tutorial : Popular Posts yg Comel

Assalamualaikum!
Hai korang.

Hari ni aku nak share cara buat  Popular Post korang nampak gempak!
Siapa yg tak tahu lagi cara dia macam mana teruskan membaca ya.

Tapi first of all, korang kena ada gadget Popular Post dulu tau.
Dah ada? Ok proceed.

1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search code ni :

]]></b:skin>

3. Dah jumpa, korang copy pulak codes kat bawah ni :

#PopularPosts1 h2{

width:100%;

font-size:1.3em;

text-indent:-12px;

font-size:14px;

text-align:center;

color: #000000;

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:8px 0px 1px;

left:-7px;

width:290px;

}

#PopularPosts1 li{

position:relative;

margin:0 0 10px 0;

padding: 3px 2px 0 17px;

left:-5px;

width:285px;

}

#PopularPosts1 ul li{

background: #000000;

position: relative;

display: block;

padding: .4em .2em .4em 2em;

*padding: .2em;

margin: .5em 0;

background: #000000;

border:2px solid #000000;

width: 180px;

text-decoration: none;

border-radius: .3em;

transition: all .3s ease-out;

}

#PopularPosts1 ul li:before{

content: counter(li);

counter-increment: li;

position: absolute;

top: 50%;

margin: -1.3em;

height: 2em;

width: 2em;

line-height: 2em;

font-size: 15px;

color: #000000;

background: #000000;

border:2px solid #000000;

-webkit-box-shadow: 0 8px 5px -7px #888;

-moz-box-shadow: 0 8px 5px -7px #888;

box-shadow: 0 8px 5px -7px #888;

text-align: center;

font-weight: bold;

border-radius: 2em;

position: absolute;

left: 0;

transition: all .3s ease-out;

}

#PopularPosts1 ul li:hover{

background: #000000;

}

#PopularPosts1 ul li:hover:before{

transform: rotate(360deg);

}

#PopularPosts1 ul li a{

font: 12px Arial, serif;

text-shadow: 0 -1px 2px #fff;

color: #444;

display:block;

min-height:25px;

text-decoration:none;

text-transform: uppercase;

}

#PopularPosts1 ul li a:hover{

color: #444;

}

4. Then, aku suggest korang paste dulu dalam Microsoft Word dengan mengekalkan warna codes tu, supaya senang korang nampak apa yang perlu tukar : MERAH 1 : warna tajuk Popular Posts
MERAH 2 & 3 : warna background Popular Posts
BIRU 1 : warna border Popular Post
BIRU 2 : warna nombor

BOLD : kelebaran Popular Posts

UNGU 1 : warna background nombor
UNGU 2 : warna border nombor

PINK 1 : warna hover Popular Posts
PINK 2 & 3 : saiz dan jenis font di Popular Posts

***Nak HTML colour codes tekan sini !!

5. Dah settle tukar apa yg perlu tukar, copy codes tersebut dan paste di atas code dalam Step 2.

6. PREVIEW.
Kalau dah puas hati, then SAVE cepat-cepat !!

Alhamdulillah.

Pheww...!
Panjang betul tutorial kali ni.