Tuesday, December 14, 2010

Tutorial: Ubah icon sebelah BlogList

Assalamualaikum..

Hari ni nak kongsi sikit ilmu mengenai icon yang ade sebelah bloglist tu ditukar jadi icon yang cantik-cantik dan comel-comel. contoh macam di bawah:

Di bawah ni icon yang asal:

( Tanda anak panah dan bulatan adalah icon asal )


Di bawah ni selepas icon ditukar:


Dah tau kan ape tu icon..? jom kite ikut tutorial di bawah =) tapi sebelum mulakan tutorial korang kene pastikan icon asal BlogList di Page Element tidak di tick. 

Contoh: 
( Tanda anak panah tu jangan di tick ok )

Step 1: Dashboard ---> Design ---> Edit HTML
Step 2: Cari code macam di bawah. 
.sidebar ul {
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-$endSide:0;
padding-$startSide:10px;
text-indent:-10px;
line-height:2.0em;
}
Step 3: Padamkan code yang dicari tadi dan gantikan dengan code di bawah:
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url(URL ICON) no-repeat 0px .00em;
margin:0;
padding:0 0 8px 19px;
margin-bottom:0px;
text-indent:5px;
line-height:1.5em;
}

Step 4: Preview. Kalau jadi macam biasa, sila SAVE =)

NOTA: 

* Kalau nak cari icon yang comel-comel boleh pegi kat SINI.



Terima Kasih sudi baca,jangan lupa baca lagi ^_^

No comments: