Tutorial Tukar Title Sidebar Kepada Icon/Image Yang Disukai Cara 1

Seperti yang dijanjikan , cik tom akan ajar tutorial cara untuk menukar title sidebar yang biasa kepada icon atau image yang korang suka. Tutorial ini request dari qila dan ekmal. Pada yang hanya nak ubah warna je boleh belajar di Tutorial Tukar Warna Background Title Sidebar.

Sebenarnya banyak cara untuk tukar title sidebar image ni. Yang cik tom tahu ada 3 cara untuk tukar title sidebar kepada icon atau image. Rasanya kalau ajar sekaligus, panjang pulak+kemungkinan besar korang akan pening kepala. So, tutorial ini akan dibahagi kepada 3 part.


STEP 1

First step ialah backup dahulu template korang sebagai langkah berjaga-jaga tapi kalau rasa yakin tak payahlah;

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

STEP 2

Korang kena tahu berapa size width (kelebaran) bagi sidebar blog. Cara untuk cek size width ialah dengan tekan keyboard “CTRL+F” atau “F3” (mana2 satu step) dan copy+paste code di bawah ke dalam kotak find;

#sidebar-wrapper


Contoh code blog cik tom ialah width: 300px. Ini bermakna kelebaran sidebar ialah 300px. Manakala untuk height pula korang boleh buat dalam anggaran 35-50px;

#sidebar-wrapper {
padding-left: 10px;
padding-right: 10px;
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


STEP 3

1) Apabila dah tahu width dan height. Next step ialah korang mendesign sidebar icon tue di photoscape/adobe photoshop/paint or apa2 application yang bersesuaian.

2) Pastikan korang set semua size icon tue mengikut width dan height seperti dalam step 2.

3) Selepas siap uploadkan gambar tue pada imageshack.us, photobucket.com dan sebagainya.

icon tomato comel


4) Sila copy url image tue, contoh url image ialah;

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


***tutorial jenis ini korang kena design tiap2 image pada sidebar.

STEP 4

Balik kembali pada “edit html” dengan;

1)DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES> klik “ctrl+f” atau “f3” untuk cari tajuk sidebar yang korang guna. Contoh “Geng Tomato”.

2) Bawah pada tajuk “geng tomato” cari code ini;

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


3) Pada code <data:title/>, gantikan dengan code
<center><img src=’URL IMAGE/ICON’/></center>

Contoh;

<h2 class=’title’><center><img src=’http://i1207.photobucket.com/albums/bb468/tomatogurl86/sidebar.png’/></center></h2>


***teruskan buat perkara sama pada semua sidebar title yang korang ada.

STEP 5

Klik preview dan save template jika tiada sebarang masalah.

p/s: sori cik tom tak berapa sihat. So segala pertanyaan sebelum ni yang belum terjawab tunggu ye. cik tom akan cuba jawab bila free nanti ye.

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 @

51 thoughts on “Tutorial Tukar Title Sidebar Kepada Icon/Image Yang Disukai Cara 1

  • January 3, 2011 at 12:53 pm
    Permalink

    wah menarik ni,,

    oh XOXO!! Blog Gosip Terpanas

    Reply
  • January 3, 2011 at 12:09 pm
    Permalink

    wah..

    thanks sudi share >.<

    Reply
  • January 3, 2011 at 12:15 pm
    Permalink

    tutorial yang bagus.
    get well soon k

    Reply
  • January 3, 2011 at 12:33 pm
    Permalink

    menarik! thanks cik tom sebb berkongsi πŸ™‚

    Reply
  • January 3, 2011 at 12:59 pm
    Permalink

    bgusnye tutorial ni..ehehe πŸ™‚

    Reply
  • January 3, 2011 at 2:36 pm
    Permalink

    wah. comlicated je nih πŸ˜›

    get well soon cik tom πŸ˜‰

    p/s: thanks singgah and drop komen. skang mase nk balas balik komen since line tenet ok la jugak ;))

    Reply
  • January 3, 2011 at 2:56 pm
    Permalink

    step no3 (1) tu
    akak dah tak reti la..
    rumitnye..

    Reply
  • January 3, 2011 at 3:17 pm
    Permalink

    boleh than rumit juga..huhuhu

    Reply
  • January 3, 2011 at 11:19 pm
    Permalink

    kak diana: akak yg step 3(no 1) tue akak kena design sendiri title sidebar tue..ramai yang ckp pening…sori xreti dah nak ajar camane..nati cik tom cuba ajar slow skit utk cara 2 n 3…

    Reply
  • January 3, 2011 at 11:24 pm
    Permalink

    ramai ker yang tak faham ni??nampaknya cik tom kena update balik entry ni..sorry ye entry di buat masa cik tom tak berapa sihat semalam…heheh..

    Reply
  • January 3, 2011 at 11:46 pm
    Permalink

    tqvm cik tom…
    i likeeee

    Reply
  • January 4, 2011 at 12:32 am
    Permalink

    wahh . thanks ajar!! hihi .
    nt bole try πŸ™‚

    Reply
  • January 4, 2011 at 1:01 am
    Permalink

    gd mng Cik Tom,teringin nk buat tp takde PS kena gi umah abah le nmpk gayanya he3.tq 4 the tutorial ye

    Reply
  • January 4, 2011 at 2:18 am
    Permalink

    Ellen pun nak gak buat sendiri tapi tak der PS gak…thks for sharing ya Tom..hehe

    Reply
  • January 4, 2011 at 2:32 am
    Permalink

    thanks ciktom..nak try buat..tapi kena design pulak..bab-bab design fail sket

    Reply
  • January 4, 2011 at 3:12 am
    Permalink

    cik tom
    side bar wrapper xder pon huhuhu

    Reply
  • January 4, 2011 at 3:14 am
    Permalink

    wah infooo bernas looo tapi angah still tak paham la cik tommm

    Reply
  • January 4, 2011 at 3:19 am
    Permalink

    SAYA DAH TRY BUAT CIT TOM
    DAH SAVE…DAN BOLEH…
    TP BILA PERGI BLOG..TAK ADALAH PULAK..
    PELIK BIN AJAIB DAH NI

    Reply
  • January 4, 2011 at 4:08 am
    Permalink

    SALAM..CK TOM..AKHIRNYA DAH JADI SAYA PUNYA…

    Reply
  • January 4, 2011 at 5:07 am
    Permalink

    Cik tom ni la soqlan yg sya tnya cik tom.tp cik tom xpham….heheheheeheh.sya plak xtaw nk terangkn….tq cik tom yg bek ati…

    Reply
  • January 4, 2011 at 6:38 am
    Permalink

    PUNYALAH XCITED NAK BUAT NI..TERAMBIL PULAK CIT TOM PUNYA TOMATO TU….HEHEHE..NASIB BAIK CEPAT2 TUKAR TAKUT KENA MARAH…

    Reply
  • January 4, 2011 at 6:59 am
    Permalink

    HEE πŸ˜€
    Trime kasehhh Cik Tom πŸ™‚
    ahaaa , Cik Tom d tag jgk tawww .
    Pasal cinte tuuuu πŸ˜‰

    *winkwink . HIHIHI

    Reply
  • January 4, 2011 at 8:51 am
    Permalink

    akak nak buat bentuk kepala mickey mouse je..jeles nye ema dah boleh buat..
    ni yanat..

    cik tom..
    mkan ubat ye..
    semoga cepat sembuh..

    Reply
  • January 4, 2011 at 11:27 am
    Permalink

    Salam Cik Tom…

    Boleh tak buat tutorial mcm mana nak tukar font lawa2 kat entri. Terima kasih ya

    Reply
  • January 4, 2011 at 1:48 pm
    Permalink

    fuiyyo0..nice sharing nih..guess what,ika tgh try tut0rial cik t0m nih..hehe

    Reply
  • January 4, 2011 at 4:33 pm
    Permalink

    cik tom nak tanya. saya dah lama cari cara nak tukar warna background sidebar title tu. tapi dekat design> template designer tu mcm xde je (ke saya yg xtau).

    camne nak tukar warna background sidebar title ek? just nak tukar warna je tak nak yang kena buat from scratch mcm tutorial cik tom ni.

    cmne ek? thanks cik tom.

    Reply
  • January 5, 2011 at 6:17 am
    Permalink

    eh cik tom: pasal soklan saya tadi tu. xpe la. dah fiqure out dah. tak sabar punya pasal google sana sini sampai dapat. fuhh.. penat. hehe.

    Reply
  • January 6, 2011 at 8:29 am
    Permalink

    cik tom…dh try wat tapi xkuar pun sidebar tu..hahaha

    Reply
  • January 7, 2011 at 5:22 am
    Permalink

    @farhah adeli: cik tom ade buat tutorial untuk ubah kaler je..boleh tgk dlm list tuorial cik tom..sori lmbt bls sbb xsmpt catch up semua…

    Reply
  • January 7, 2011 at 5:23 am
    Permalink

    @Cik Kamoo: tak tahulah berkesempatan ajar ke x..insyaallah kalau berpeluang dan ada masa ye..nak cepat boleh google dl..

    Reply
  • January 7, 2011 at 5:25 am
    Permalink

    @Sakinah88:cik tom tgk pada title sidebar ada yang ubah dan ada x??kalau guna teknik cik tom ajar dlm tutorial ni;

    caranya;

    1)klik ctrl+f cari tajuk pd sidebar.contoh "hit counter".bawah tue cari code ni;

    <h2 class='title'>hit counter</h2>

    2)pada code ni ubah camni;

    <h2 class='title'><center><img src='URL IMAGE/ICON'/></center></h2>

    **tiap2 tajuk sidebar kena ubah..

    yg lain boleh follow up step kt tutorial ni..

    Reply
  • January 14, 2011 at 3:03 pm
    Permalink

    Valuable info. Lucky me I found your site by accident, I bookmarked it.

    Reply
  • January 17, 2011 at 10:48 am
    Permalink

    kalo amik image dekat glitter graphics xblh ke?

    Reply
  • January 19, 2011 at 2:15 pm
    Permalink

    @noraim: boleh je yunk..tapi kena cari gambar yang ada tajuk sekali sebab ni code guna untuk image title sepenuhnya…ada lg 2 kaedah tp belum sempat cik tom share…insyaAllah akan datang πŸ™‚

    Reply
  • February 5, 2011 at 2:56 pm
    Permalink

    @sicomot-comel:patutnya jadi je..sebab yang lain dah jadi…peliknya…

    cik tom dah tgk pic tue..mmg betul dah code dah tukar..problem pe ye..erm kalau scc xkisah la..bg id n pswd pd cik tom utk cik tom tgk code…kl xnak xpelah..huhu

    [email protected]

    Reply
  • February 8, 2011 at 10:25 am
    Permalink

    owh..

    ok cik tom..
    nnt SCC email kat cik tom eh..

    Reply
  • February 20, 2011 at 6:06 am
    Permalink

    Cik Tom sayam. Shag ada problem lah pasal coding neh. Setiap kali Shag paste kan kod dan save, kod image tu hilang. Dia ganti balik dgn data:title secara automatik. Uwaa~

    Reply
  • Pingback:Tutorial Tukar Title Sidebar Background Kepada Icon/Image Cara 2 - Ciktom

  • July 25, 2011 at 11:04 pm
    Permalink

    salam . cik tom nak tanya mcm mna nak buat shoutbox yg ada disidebar dan ada gmbar kt ats kt ats tue ? mcm mna ?

    Reply
    • August 15, 2011 at 8:11 pm
      Permalink

      salam..sorry yunk..cik tom stop buat tutorial sementara waktu ni…cuba rujuk blog tutorial yang lain untuk shoutbox autohide camtu ye yunk…

      Reply
  • October 26, 2011 at 1:31 am
    Permalink

    nak tahu cara nak buat icons untuk sidebar . photoscape ada , photoshop pon ada , cuma tak tahu cara nak buat . kalau sudi tolong ajarkan n linkkan dekat shoutbox saya .. thanks πŸ™‚

    Reply
  • January 28, 2012 at 5:17 pm
    Permalink

    salam cik tom macam mana nk letak ikon kt sebelah url tu…

    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