Tutorial Tukar Title Sidebar Background Kepada Icon/Image Cara 2

Ini versi or cara ke 2 yang korang boleh apply untuk ubah title sidebar kepada icon atau image. Cara pertama korang boleh rujuk pada “Tutorial Cara Tukar Title Sidebar Kepada Icon/Image Cara 1”. Perbezaan di antara cara 1 dan ke 2 ialah cara 1, korang kena buat tiap2 satu design image+tajuk sidebar bagi setiap sidebar manakala yang ke 2 korang just letak satu image/background bergambar pada bahagian title sidebar. Manakala untuk tajuk boleh korang masukkan secara manual melalui gadget sidebar. Untuk hanya mengubah warna background pada title sidebar boleh rujuk “Tutorial Tukar Warna Background Title Sidebar“.

Untuk perbezaan cara 1 dan 2 lebih jelas, sila lihat gambar dibawah.

Cara 1 Cara 2

 



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


Tengok width (kelebaran) sidebar korang dengan tekan “ctrl+f” atau “f3”, untuk cari keyword “#sidebar-wrapper

Contoh coding;

 

#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 */
}

***bagi contoh code di atas width (kelebaran) ialah 300px. Height boleh dibuat dalam anggaran 40-50px.
***coding maybe berlainan bagi setiap blog

STEP 3


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/sidebar.png



STEP 4

Kembali pada “edit html”. Tekan “ctrl+f” dan cari code “sidebar h2″

 

.sidebar h2 {
text-align: center;
background:#8A4117;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}



Pada code background tue sila tukar kepada;

 

background:url(“URL IMAGE/BACKGROUND”) no-repeat 2px .25em;

 



STEP 5

Preview dan save jika tiada sebarang error pada coding.

******************************

Ini cara yang gayah pernah buat pada template blog cik tom sebelum ini. Cara yang cik tom guna sekarang?? Tunggu untuk cara ke 3 dalam next tutorial. Segala pertanyaan mengenai tutorial sebelum2 ni, insyaAllah cik tom akan balas secepat mungkin ye. So, untuk apa-apa pertanyaan lanjut mengenai tutorial sila “tick subscribe” pada ruangan komen.


p/s: insyaAllah minggu ini akan berusaha marathon tutorial yang dalam list request dan blog review dalam waiting list.

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 @

49 thoughts on “Tutorial Tukar Title Sidebar Background Kepada Icon/Image Cara 2

  • January 28, 2011 at 5:34 am
    Permalink

    Wahh~ Thanks kongsi Cik Tom sayam! ;D

    Reply
  • January 28, 2011 at 5:47 am
    Permalink

    thanks cik tom..amat berguna tuk saye

    Reply
  • January 28, 2011 at 6:06 am
    Permalink

    terima kasih cik tom..
    nanti akak cuba..

    kenapa gayah tak mau buat blog tutorial ye..
    dia kan pandai benda2 gini..kan??

    Reply
  • January 28, 2011 at 6:15 am
    Permalink

    ciktom yang baik…

    akak singgah deh…

    Reply
  • January 28, 2011 at 6:22 am
    Permalink

    @shag: ur wlcm dear…yg shag punye tue insyaAllah cik tom buat secept mungkin..

    @atiqah: ur wlcm…slmt mencuba

    @diana: sama2 sis..aah…gayah mmg pandai buat/design blog org lain..tp xpernah buat tutorial plk…kalau buat konpem ramai nak belajar…akak try la suggest kat gayah..

    Reply
  • January 28, 2011 at 6:45 am
    Permalink

    as salam…cikTom kembali bertutorial…bagus2.nak try buat laa yg mcm kat entry nie…thanks cikTom

    Reply
  • January 28, 2011 at 7:19 am
    Permalink

    salam cik tom,

    lama tak mai jengah kak ati
    bz betui na..

    byk kisah sedih yg kak ati
    alami dlm seminggu ni tau

    nanti kak ati nk ask something
    tp biar cik tom tak bz dulu..ok

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

    ada tuto br thanks cik tom

    Reply
  • January 28, 2011 at 7:28 am
    Permalink

    wah!! ada tutoo!! nk buatt!! ^^ tankx cik tom.. =)

    Reply
  • January 28, 2011 at 7:37 am
    Permalink

    Yeay…Cik Tom is back…windu Cik Tom…he he …akak mmg ada cita cita nk wat semua ni, tapi kan mcm da serik…takut ilang lagi…

    Reply
  • January 28, 2011 at 7:38 am
    Permalink

    Tom,
    Datang ziarah. Mekar belum lagi nak tukar apa2 kat sidebar ku. maklumla masih baru. Nanti boring nk tukar boley godek2 tutorial sini !

    Reply
  • January 28, 2011 at 8:05 am
    Permalink

    alamak..ri tue da tag u..cba check balek my entry yg dpt award tue ea

    Reply
  • January 28, 2011 at 8:54 am
    Permalink

    salam

    cik tom….besh3 ni….

    Reply
  • January 28, 2011 at 9:14 am
    Permalink

    dh lama nk cari tutorial utk sidebar ni.. akhirnya cik tom dh bg.. tp, coding tak sama la cik tom.. nk wt cam mana? huhuhu..

    Reply
  • January 28, 2011 at 9:20 am
    Permalink

    Hai hai Tom..ellen suka ngan tutorial ni..nak try nanti ler ya…hehe..miss u dear!!

    Reply
  • January 28, 2011 at 9:24 am
    Permalink

    cikgu tom !!! dah lame cikgu tom x wat tutorial..anak murid sume rindu ni haaaa…thanx cik tom 4 diz tutorial ^__^

    Reply
  • January 28, 2011 at 9:49 am
    Permalink

    wah..
    bagus tutorial ni.

    thanks cik tom 😀

    Reply
  • January 28, 2011 at 1:04 pm
    Permalink

    pandai cik tom buat tutorial ni..teruskan usaha cik tom..hehe

    Reply
  • January 28, 2011 at 1:15 pm
    Permalink

    hai cik tom.saye baru follow blog cik tom.best r cik tom buat tutorial2 nih.keep up da gud effort cik tom!=D

    Reply
  • January 28, 2011 at 1:50 pm
    Permalink

    Ke mana CT..menghilang rindu akak CT tak ziarah blog akak.Busy study ke?

    Reply
  • January 28, 2011 at 2:11 pm
    Permalink

    yang sebelum ni sy dh try wat tp tak menjadi..
    sy search coding tu tak jumpa..

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

    tak terfikir nak buat..hihi

    tapi mungkin ok bagi yang berminat.mana tau nak lawakan blog.

    Reply
  • January 28, 2011 at 4:20 pm
    Permalink

    cik tom ni byk tutorial yer..
    senang nak faham dan cute..hehe

    Reply
  • January 29, 2011 at 4:02 am
    Permalink

    cik tom… ada tutorial x cmne nk sign up alexa.. huhu konpius la.. ;P

    Reply
  • January 29, 2011 at 4:43 am
    Permalink

    boleh dipraktikkan nie cik tom..:)

    thanks berkongsi ilmu…

    Reply
  • January 29, 2011 at 12:27 pm
    Permalink

    bez laa tips2 yg cik tom bg…keep it up

    Reply
  • January 29, 2011 at 2:05 pm
    Permalink

    tertarik jugak nk buat cara ni, tp skg ni mlas ag nk mendesign..huhu

    Reply
  • January 29, 2011 at 3:10 pm
    Permalink

    thank tapi tak leh guna untuk blog sy…tak tahu napa code blog sy tak leh nak pakai suma tutorial yang ada kat sni..
    ermmm

    Reply
  • January 30, 2011 at 8:26 am
    Permalink

    alaa..
    cik tom..

    kod tu tak jumpe larh..huhuhu

    Reply
  • February 1, 2011 at 7:11 pm
    Permalink

    @Ati Masrif: nak tanya pe tue ye??

    lm xjenguk akak…sori ye akak..cik tom busy so jrg on9…

    Reply
  • February 1, 2011 at 7:12 pm
    Permalink

    @shatooman: cik tom xberapa pasti..kena tgk coding blog achie dulu…

    Reply
  • February 1, 2011 at 7:13 pm
    Permalink

    @zmah: ahh busy study..tiap2 hr ade presentation…huk3

    Reply
  • February 1, 2011 at 7:14 pm
    Permalink

    @ADfeez: takde buat lg tutor tue tp cik tom masukkan dlm list tutor…huhu

    Reply
  • February 1, 2011 at 7:22 pm
    Permalink

    @comot-comel: kena guna tutorial yg cara 1…[http://www.ciktom.com/2011/01/tutorial-tukar-title-sidebar-kepada.html]

    tp step 4 dlm tutor tue. cuba cari nama tajuk kat sidebar…contoh "ctrl+f" tajuk ".:: Carrot Layu ::."

    pastu yang lain follow up je tutorial dari cara 1 tue ye…

    Reply
  • February 18, 2011 at 9:57 am
    Permalink

    cik tom , dh try wt dh yg frst uw , ta jdik , hurm , sdey lahhh , cam compius jek ,

    Reply
  • February 20, 2011 at 2:45 pm
    Permalink

    @NuRuLhUdA aBu hAsSaN: yg first??apa yg first..step 1 ker??step 1 untuk download template sebagai backup incase silap code…

    cuba bgth part mana yg confius??cik tom akan cuba tlg..

    Reply
  • February 25, 2011 at 1:08 pm
    Permalink

    sy dh cari code tu xde pun dalam edit html saya 🙁

    Reply
  • March 22, 2011 at 3:30 am
    Permalink

    @Mira Hana: ur wlcm 😉

    Reply
    • April 22, 2011 at 9:09 pm
      Permalink

      aah code blog nadiah takde yang dalam step 2..maybe ignore je dan followe up step seterusnya sebab code dalam step ke 4 ada dalam blog awak…step 2 tue hanya nak pastikan kelebaran sidebar awak..awak boleh cuba try dan error untuk width dan height..atau cuba amik ukuran cik tom cik tom..selamat mencuba..

      Reply
    • May 3, 2011 at 10:23 pm
      Permalink

      erm kalau xde code tue kt blog cikgu…cikgu boleh terus proceed step 3 dan 4 untuk “h2{“…yg sidebar-wrapper tue hanya nak tau width je dan agak berapa height…width tue cikgu cuba guna 280px dan height 35px/40px kerr?tgk kalau buat menjadi x?

      Reply
  • July 10, 2011 at 9:45 pm
    Permalink

    salam, cik tom nak tanya kenapa nurul tak menjadi wat tutorial ni yer??
    ini nurul bagi coddingnya dan boleh tak tunjukkan kat mana yang nak di letakkan..asyik tak menjadi je bila buat…

    .sidebar h2 {
    margin: 1.6em 0 .5em;
    padding: 4px 5px;
    background-color: #FF99CC;
    font-size: 90%;
    color: #ffffff;text-align:center;border: 0px solid #000000;
    }

    harap cik tom boleh tolong yer..

    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