Hasil seni dan reka bentuk adalah berbayar dan hakcipta Whitey Mommy.
Sila hubungi saya di whiteymommy@yahoo.com untuk sebarang pertanyaan dan tempahan.
Anda TIDAK DIBENARKAN SAMA SEKALI untuk mengambil/menyalin/menyimpan
mana-mana bahagian hasil seni dan reka bentuk yang telah saya hasilkan TANPA KEBENARAN!

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... :)

12 Comment (s):

  1. Salam.. Sha, nampak rumit je.. Memang tak pandai nak main kod HTML tu.. By the way, thanks for sharing..

    ReplyDelete
  2. thanx for sharing..i try this sometime..

    ReplyDelete
  3. ida dh wt dh..mkch bnyk2 tow...ida nk kogsi semua nie blh x?nnti tgk tow kt blog ida..
    http://idasayangkamu.blogspot.com

    ReplyDelete
  4. @iDa
    jangan lupa letak kredit...:P penat tau akk study nak wat benda ni.. hahaha...:)

    ReplyDelete
  5. thanx for this easy and simple tutorial. sangat membantu sy yg buta coding ni...

    ReplyDelete
  6. fuhh akak..mmerlukan kesabarn and ketekunan nk wat ni kn,takpe usehe tagge kjyaan..:')

    ReplyDelete
  7. Nice,.. thanks so much k atas tutorial ni :)

    ReplyDelete
  8. kalau nak letak ikon tu kat kanan macam mane

    ReplyDelete

Thank You For Leaving a Comment to Me...

 
Copyright © Whitey Mommy™