Tutorial : Ubah Title Sidebar Kepada Bentuk Imej

Gadis Kidal Berceloteh....

.Assalamualaikum.

Haii.. Haii . Korang !! Eh , Lyssa nak buat satu tutorial yang agakk menarikk.

Mungkin , ramai yang sudahh tahu macam mana nak buat .

Tapi  , Lyssa tetap nak ajarkan , sebab ada yang request suruh buat tutorial macam ni :) hehe :)

Oke , Korang tahu tak , macam mana nak buat title sidebar macam Lyssa ?

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcLsY7tnvkuG91ZoOAlc2ZifVLcAGVR5RiGA8tSnbP6IDxISZ2Udi4x2NBwXrRto2kYKkqvK_2aAMtpE8E0E0mIK7e8ACCoBaBed6MBtteVc4a_DQjhjLc4mt4JhQgMfbKVfsdsBrQf0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcLsY7tnvkuG91ZoOAlc2ZifVLcAGVR5RiGA8tSnbP6IDxISZ2Udi4x2NBwXrRto2kYKkqvK_2aAMtpE8E0E0mIK7e8ACCoBaBed6MBtteVc4a_DQjhjLc4mt4JhQgMfbKVfsdsBrQf0/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 ! ^_^ 

KONGSIKAN ARTIKEL INI..

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest