Tutorial : Ubah Title Sidebar Kepada Bentuk Imej



Oke , Korang tahu tak , macam mana nak buat title sidebar yang ada gambar ?
Macam dekat bawah ni haa.. :
 
**Saja je Lyssa PrintScreen Banner tuh sekali..
Nak suruh korang letak dekat sidebar korang . hehehe :))

Oke lah . nak buatkan ? Ikot Step di bawah ..
Lyssa hanya tunjukkan , macam mana nak masukkan dalam Blog korang tuh:)
Kalau nak create tuh, create lah sendiri guna photoshop or photoscape ok ??

1. Mula-Mula korang kena cari kelebaran (width) sidebar tu dulu ..
 >> Dashboard > Design > Edit Html > Ctrl + F .. cari kod ini :

#sidebar-wrapper {
width: 260px;
** Maknanya , sidebar korang tu , 260px taw ? Kalau tak jumpa kod yang diboldkan tuh.. Korang buat cara ini :

 >> Dashboard > Design > Template Designer > Adjust Width > Lihat size sidebar..


2. Ok , bila dah tahu saiz tu , korang create lah guna photoshop atau photoscape ok ? Lyssa guna photoshop.. hehe :) Lepas tuh , boleh download image korang create tadi di >> http://imgur.com/  


Oke ~
Sekarang ni , Lyssa ajarkan , macam mana nak masukkan dalan blog !
1. Dashboard > Design > Edit Html > Download Full Template . (Penting!!)
2. Sekarang , Tick Expand Widget Template dulu ye !! 

3. Now , cari kod Title Sidebar kita ye. Contohnye , kalau dekat Sidebar korang tulis About Me .. Korang kena Taip About Me (kecil besar tulisan itu tulis sebijik2)!!!
Tekan Ctrl F serentak .. Tapi About Me

4. Bila dah Taip kan , Korang akan jumpa kod macam ni taw :
<b:widget id='HTML1' locked='false' title='About Me' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
   
<h2 class="title"><data:title></data:title></h2>
  </b:if>

 5. Tukarkan Kod Yang Ini :


<h2 class="title"><data:title></data:title></h2>

kepada kod imej korang.. Macam ini :

<img border='0' src='http://4.bp.blogspot.com/-3hhKymXSV9M/TbftNQX5pzI/AAAAAAAAAbA/T56J6P4IJng/s1600/1.png'/> 
**Masukkan URL/Link Imej Korang dalan tulisan Warna Merah**


6. Hasilnya akan jadi macam ini :

<b:widget id='HTML1' locked='false' title='About Me' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <img border='0' src='http://4.bp.blogspot.com/-3hhKymXSV9M/TbftNQX5pzI/AAAAAAAAAbA/T56J6P4IJng/s1600/1.png'/>
  </b:if>
 7. Ok , sekarang korang ulang step yang sama dengan title yang lain pulak!


8. Bila dah siap , PREVEIW dulu ! Menjadi takk ? Kalau menjadi , SAVE trus!


 
hehehe...
=SELAMAT MENCUBA YE KORANG=
Baca ni !! :
p/s :Kalau korang tak tahu macam mana nak create title tu..
Boleh Order dekat Lyssa.. RM2 satu title ! Murahh kan ?
Boleh inbox Lyssa dekat Fesbukk Lyssa , sekarang ! ^_^ 

No comments: