Tutorial: Cara meletakkan Icon Berbeza pada Sidebar

Hari ni 3 tutorial saya keluarkan... hehehe bukan apa... selagi tutorial itu tak melanggar etika kerja saya... Insyaallah saya akan cuba tunaikan ya... [jangan la terus terang tanya: Mommy, ajar i cemana nak design template... hehehe tak beragak tanya kan...:p] hehehe jokes ok... tapi kalau ada yang tanya camtu saya memang tak boleh nak jawab la... 1st... it's my job [giler kedekut ar... hehehe] 2nd... saya tak tahu nak ajar macam mana... sebab bila saya design... idea akan datang dan tangan akan bergerak...[it's a gift, tapi kekadang blur juga...;p]

Ok... Continue with tutorial, actually tutorial ni... ada seorang blogger yang request... DeCrew yang request...tanyanya camner saya wat icon sebelah sidebar... ok... tanpa buang masa...pada siapa yang nak tahu follow step kat bawah...

Perhati gambar ni... icon berbezakan... ok.. dah pahamkan apa yang dimaksudkan...:)

1. Log In @ Klik ke Dashboard > Layout > Edit HTML [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi boleh backup balik... kerana jika berlaku kesilapan, bahagian post anda akan hilang... sila ambil langkah berjaga2 ya...]

2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]

3. Copy dan paste code dibawah diatas atau sebelum code ]]></b:skin.

#Text2 h2 {

background:url("url gambar anda suka") no-repeat scroll right 2px #ffffff ;

color:#000000;

font-size:18px;

text-align:right;

padding-right:50px;

padding-top:10px;

padding-bottom:10px;

}

4. Huraian bagi code diatas, rujuk kat bawah ya:

a) warna purple adalah ID bagi widget anda.. ini penting, anda perlu mengambil ID pada widget anda...cara untuk mengambil "ID widget" adalah seperti gambarajah dibawah.

cara untuk mengambil id widget : pastikan anda perhati betul2 ya...

b) warna merah ini penting, kerana jika tiada ini maka tiada la gambar, masukkan url gambar anda suka pada bahagian ini. anda boleh cari icon yang anda suka disini atau pun anda boleh design sendiri. lebih cantik jika anda menggunakan icon yang sama saiz [kreativiti anda diperlukan untuk bahagian ini...] dan warna bagi background pula anda boleh tukar pada #ffffff dengan warna kegemaran anda.

c) warna biru ini pula adalah warna text tajuk sidebar anda... anda boleh tukar dengan warna yang anda suka.

d) warna hijau ni... anda boleh tukar kedudukan text pada tajuk sidebar anda samada left,right ataupun center.

e) warna merah pekat ini pula, kedudukan gambar anda... kat sini try and error la ya... kalau anda tahu saiz image tu... lagi bagus... follow aje saiz image anda...

5. Untuk mendapat hasil yang memuaskan, sebelum anda save anda boleh la Preview untuk melihat keadaan icon anda.. bila dah puas hati... boleh lah save.

Ambil Perhatian: Anda perlu mengulang kod diatas untuk sidebar yang berbeza... satu kod hanyalah untuk satu sidebar sahaja. jadi jika ada 10 sidebar anda perlu masukkan 10 kod dengan image yang berbeza.

P/s: Jangan lupa selepas ambil tutorial, silalah komen ya... :)