Cara Letak Icon Comel Tiltle Sidebar | Tukar Title Sidebar Cara 3


Cik tom nak habiskan cara 3 iaitu cara terakhir yang cik tom tahu untuk tukarkan title sidebar dengan menambahkan icon/image padanya. Selain tue, korang boleh rujuk juga tutorial sebelum ni bagi kategori title sidebar;

STEP 1

Sila backup template sebelum mula untuk mengedit sebarang code.

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>klik DOWNLOAD FULL TEMPLATE

STEP 2

Design background image bagi title sidebar mengikut ketinggian (atau boleh upload gambar dari mana2 website yang bersesuaian) dan uploadkan gambar tue kepada photobucket.com, imageshack.us atau mana2 website storage image. Selepas upload sila copy “url image” yang diberi. Contoh url image;

http://i1207.photobucket.com/albums/bb468/tomatogurl86/icontomato4.png

STEP 3

Kembali pada “Edit html”. Tekan “ctrl+f” dan untuk cari tajuk sidebar yang korang guna. Contoh “10 Terlatest”.

STEP 4
Bawah pada tajuk “10 Terlatest” atau mana-mana tajuk sidebar yang digunakan cari code ini;

<data:title/>

STEP 5
Copy dan paste code dibawah sebelum code <data:title/>

<img align=’left’ height=’30’ src=’URL GAMBAR’ width=’30’/>

Copy dan paste code dibawah sebelum code <data:title/>

<img align=’right’ height=’30’ src=’URL GAMBAR’ width=’30’/>

Hasilnya;

<h2 class=’title’><img align=’left’ height=’30’ src=’URL GAMBAR’ width=’30’/><data:title/><img align=’right’ height=’30’ src=’URL GAMBAR’ width=’30’/></h2>

****Nilai width dan height boleh diubah mengikut keselesaan korang.

****Teruskan buat perkara sama pada semua tajuk sidebar yang korang ada.
****Code diatas untuk letak 2 gambar di kiri dan kanan tajuk sidebar. Tapi kalau nak letak satu image je pada sidebar, boleh pilih nak letak gambar sebelah kiri atau kanan.

STEP 6

Preview dan save jika tiada sebarang error pada coding.

Sharing is caring

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

26 thoughts on “Cara Letak Icon Comel Tiltle Sidebar | Tukar Title Sidebar Cara 3

  • March 11, 2011 at 4:14 pm
    Permalink

    salam

    perkongsian yang bagus utk mereka yang mahukan kelainan dalam size imej di sidebar mereka..

    Reply
  • March 11, 2011 at 4:25 pm
    Permalink

    saya dah try tapi tak menjadi.
    perkataan yg swuh search tu banyak tak twu nak letak mnew satu?

    Reply
  • March 11, 2011 at 4:27 pm
    Permalink

    tak cuba tak tahu kan, tapi saya tak cuba2..wahaha

    thanks cik tom, saya kutip semua ilmu

    Reply
  • March 12, 2011 at 12:14 am
    Permalink

    hyejom follow blog saya 🙂

    Reply
  • March 12, 2011 at 1:28 am
    Permalink

    salam cik tom, tq ek….

    Reply
  • March 12, 2011 at 2:43 am
    Permalink

    cik tom sayang..mantap la..hehehe

    Reply
  • March 12, 2011 at 4:02 am
    Permalink

    Tom tak de kelas ke…?Tom, akak kalau bab bab nak sentuh coding ni..dah trauma..hu hu hu…hanya Tom yang tahu…nasib ada Tom….tq Tom…,

    Reply
  • March 12, 2011 at 8:15 am
    Permalink

    as salam mercikkk !!!

    erm makasih cik tom..
    perkongsian yg hebat..

    yg cik tom ajar 2 spec dah wat tggl masa nak tambah2 jaa,..
    haha
    mercikkk !!! 😀

    Reply
  • March 14, 2011 at 3:36 am
    Permalink

    ini yang saye cari-cari….
    mm..page nampak boring tanpa icon yang sumel2..

    tengkiu..

    Reply
  • March 21, 2011 at 11:57 am
    Permalink

    @nadiah izahar: search tajuk sidebar satu persatu…apa tajuk sidebar yang nadiah guna?cari dan tukar satu persatu…buat perlahan2 ok 🙂

    Reply
  • March 21, 2011 at 12:03 pm
    Permalink

    @Cikgu Nurin: ni semua entry autopublish la akak…hehe…takpe akak..layout akak skang dah ada title sidebar comel..

    Reply
  • April 6, 2011 at 11:49 pm
    Permalink

    hai cik tom..nape eh i try tuto yg ni error ye? =(
    Kuar ni plak:~
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “align”.

    Error 500

    Reply
    • April 8, 2011 at 11:34 pm
      Permalink

      maybe ada code yang awk tertinggal sebab itu keluar camtu….cuba buat balik… jangan patah semangat ye..try and error

      Reply
  • April 13, 2011 at 11:59 am
    Permalink

    hai cik tom..sorry lama x on9.huhu.
    Erm..tuto ni ssuai untuk minima ke dear?
    coz i guna minima je tu..;(
    Dah try lagi..:(
    Jom baca entri terkini TeddyLove …8 Tips Ringkas Penjagaan Rambut ♥My Profile

    Reply
    • April 13, 2011 at 7:35 pm
      Permalink

      boleh je…tapi ubah cara sikit….contoh sidebar awk ada tajuk “my history”…
      1) pada edit html cari word “my history”
      2)dan awak akan cuba code ni ” <h2>My History</h2> ” dalam edit html awak
      3) utk masukkan gambar, Copy dan paste code dibawah sebelum "my history"
      <img align=’left’ height=’30’ src=’URL GAMBAR’ width=’30’/>
      Copy dan paste code dibawah selepas "my history"
      <img align=’right’ height=’30’ src=’URL GAMBAR’ width=’30’/>
      4) step tue awak buat utk satu persatu bagi setiap title sidebar awak…selamat mencuba..

      Reply
  • January 18, 2012 at 5:12 pm
    Permalink

    saya tk dapat buat dari td. jd stress skrang. i need your help 🙁

    Reply
    • January 23, 2012 at 11:24 pm
      Permalink

      sori baru on9..step mana yang problem ye?

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE