Tutorial Buat Background Title Sidebar

Hi semua..
Atas permintaan adik nuyul. Cik tom cuba buat tutorial untuk letak background warna pada title sidebar. Tapi setiap template blogger berlainan coding tapi pada asasnye keyword tetap ada yang sama sikit2 so adik kena rajin cuba ye. Try and error untill success.






STEP 1


DASHBOARD>DESIGN>EDIT HTML>tick “EXPAND WIDGET TEMPLATES”


STEP 2


Apa-apa pun sebelum mula nak edit code. Untuk keselamatan korang kena backup dulu coding yang lama dengan klik ” DOWNLOAD FULL TEMPLATE





STEP 3


Tekan papan kekunci keyboard “CTRL” dan “F” serentak. Pastu akan keluar pop-up box diatas sebelah kanan screen. Korang copy+paste word ” sidebar” dalam box tue.





STEP 4


Akan keluar semua keyword “sidebar” (highlight word) yang ada dalam html. So korang kerana check satu persatu sehingga jumpa “.sidebar h2” atau “.sidebar.widget.h2”. (diingatkan maybe semua orang berlainan coding. Kalau tak jumpa korang kena try and error tau. Cari coding yang seakan-akan camni)





STEP 5


Ni contoh yang coding blog cik tom;

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



1) Code yang warna merah tue korang tukar dengan warna yang korang suka untuk tukar warna backgroud. Nak tengok senarai jenis warna dan code html warna, boleh klik kat SINI.


2) Selain code warna, korang boleh jugak tukarkan code merah tue kepada “transparent” kalau nak kan background title tue transparent.


STEP 6


Klik “PREVIEW” untuk melihat hasilnya. Kalau tiada error dan berpuas hati boleh klik “SAVE TEMPLATE“.




p/s: Harap tutorial ni membantu adik nuyul dan blogger lain. Kalau ada tersilap maklumat cik tom sampaikan ni sila jangan segan-segan bagitahu 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 @

69 thoughts on “Tutorial Buat Background Title Sidebar

  • October 12, 2010 at 5:39 am
    Permalink

    perghhh!!! mantap r info ko ni Tom, aku da agak, memang meletop budak Tom ni miahahahaa

    bagus2, nice sharing.. 10/10

    Reply
  • October 12, 2010 at 5:52 am
    Permalink

    @padin: hoho..sekadar share ilmu la..ko dah terlebih tahu kan..huhu

    aku rasa ko happy pasal dapat jadi orang 1st komen for d 1st time kan??hehe…

    Reply
  • October 12, 2010 at 6:26 am
    Permalink

    haha akhirnya dapat gak jadik 1st ekekeee

    Reply
  • October 12, 2010 at 6:44 am
    Permalink

    rajin buat tuto cik tom ni..huhu

    Reply
  • October 12, 2010 at 7:02 am
    Permalink

    bagus tutorial ni..dh detail tu..harap2 adik huyul dapat buat yea… 🙂

    Reply
  • October 12, 2010 at 7:11 am
    Permalink

    tom tom bak

    🙂

    Reply
  • October 12, 2010 at 7:18 am
    Permalink

    akak kalu bab2 coding/ctrl/paste ni yg lemah cik tom..aduyaii..

    tulun2..nak letak ads large rectangle pom akak xreti..heheh..

    cik tom..add ym nak?..ni emel akak

    msteja03@yahoo.com

    senang nk tanye2..

    Reply
  • October 12, 2010 at 7:19 am
    Permalink

    wah…baiknya tom buat tutorial kan..ok ni Tom..teruskan…ellen pon dpat juga belajar..hehhe

    Reply
  • October 12, 2010 at 8:08 am
    Permalink

    Ni marathon tutorial plak ke cik Tom?
    Haha..
    Rajin ek..
    Aku x fhm pun tutorial ape ko buat ni..
    Haha..
    Btw, nice..

    Reply
  • October 12, 2010 at 9:08 am
    Permalink

    wah..
    rajin cik tom sekarang ni buat tutorial ye..

    Reply
  • October 12, 2010 at 9:38 am
    Permalink

    Fuh.. Memang kari berapi kawanku sorang ni.. Makin lama makin mantap.. nice sharing tutorial.. tp sya rsa sya xdpt pakai.. hehe..

    Reply
  • October 12, 2010 at 9:45 am
    Permalink

    rajin la wat tutorial..

    Reply
  • October 12, 2010 at 9:45 am
    Permalink

    rajin la wat tutorial..

    Reply
  • October 12, 2010 at 10:15 am
    Permalink

    mekasih cik tom sbb sudi b'kongsi ilmu..hihi..

    *cik tom, nk tnye 1 soklan memandangkn cik tom nie pro dah dlm bab2 blog nie..hihi..sy pnye entry nape x bley nk tukar kaler kpd kaler yg sy nak ye??..bile publish je, kaler tulisan jdk xde la..problem kat mane tu ek??..mekasih cik tom..=))

    Reply
  • October 12, 2010 at 10:17 am
    Permalink

    @pch: tenkiu 😉

    Reply
  • October 12, 2010 at 10:17 am
    Permalink

    @padin: tahniah!! ;P

    Reply
  • October 12, 2010 at 10:19 am
    Permalink

    @eda: rajin buat bila ade bertanyakan..tapi tak dapat la buat tiap2 hari sebab takut orang borink pulak..huhu..

    Reply
  • October 12, 2010 at 10:19 am
    Permalink

    @syamila: tue la harap adik nuyul dapat buat..tapi tuan empunya diri yang request tutor tak datang lagi..hihi

    Reply
  • October 12, 2010 at 10:20 am
    Permalink

    @robot sakti: yup nape yunk??hihi..

    Reply
  • October 12, 2010 at 10:22 am
    Permalink

    @sarah: saya dah bagi link yang tutorial buat LR kat komen entry akak..cuba buat dulu ya..

    ok nati cik tom add kat ym..skang tnet slow..so tak dapat nak login..huhu..

    Reply
  • October 12, 2010 at 10:23 am
    Permalink

    @ellen: sekadar berkongsi ilmu mana yang tahu ellen..ni pun ada lagi 2 request tutorial..ngee…tapi kena berselang dengan entry lain la..tak boleh selalu..sebab ni blog peribadi bukan tutorial..huhu

    Reply
  • October 12, 2010 at 10:25 am
    Permalink

    @tieah: dah tak marathon ni..kalau marathon semua entry tutorial..hehe..

    ko memang best..paling jujur..i loike..kalau ko tak faham n nak belajar bgth je..boleh terangkan mana yang tak tahu..huhu

    Reply
  • October 12, 2010 at 10:26 am
    Permalink

    @diana: dah selang selikan dengan entry lain ni akak..kalau selalukan muak pulak blogger lain tengok..huhu..

    Reply
  • October 12, 2010 at 10:27 am
    Permalink

    @aretikz: pakai wordpress kan??takpe ur blog dah cantik..

    memang kari berapi sebab tadi makan megi slurpp kari berapi..miahahaha~

    Reply
  • October 12, 2010 at 10:27 am
    Permalink

    @rongak: macam rongak jugak..rajin buat bila ade yang bertanyakan 😉

    Reply
  • October 12, 2010 at 10:30 am
    Permalink

    @ladyana: ur wlcm..

    ni mesti yana pakai google chrome kan???cik tom pun pakai google chrome tak dapat setup warna..so setiap kali nak edit entry cik tom akan guna internet explorer(edit kaler)..nak bw br guna google chrome(sbb laju)…

    skang still seeking 4 de solution..kl tahu ciktom akn inform yana 😉

    Reply
  • October 12, 2010 at 11:50 am
    Permalink

    cik tom saya ada masalah besar, mcm mana kalau saya malas tapi nak blog jd cantik sendiri. ade penyelesaian tak? haha

    Reply
  • October 12, 2010 at 12:38 pm
    Permalink

    @poyaty: penyelesaian??tunggu bulan jatuh ke riba…ngee~

    Reply
  • November 1, 2010 at 7:37 pm
    Permalink

    alaaaa.. coding lain.. waaaa.. dop retiiiiiii… nk wat blog jadik lawa gakkk… wuwuwuwuwu

    Reply
  • November 4, 2010 at 3:58 am
    Permalink

    @Nufa Yusof: owh coding lain cam mana??kalau xde coding "backgroud"..boleh tambah tau..

    Reply
  • November 9, 2010 at 4:22 am
    Permalink

    salam ciktom..ganer nk buat mcm menu hide/show ciktom tu..yg menu banner contest/ga dan jom curik banner ciktom tu…nk buat camtu jugak sbb loading belog sya tu lambat sgtla…lagipun buat cam ciktom tu kemas sikit..kasi tutorial kat saya leh?tq…

    Reply
  • November 11, 2010 at 11:54 am
    Permalink

    @LyNn'Azlina: rasanya cik tom dah drop komen bg link yg ajar tutorial tue di entry latest lin sebelum ni…maybe lin terlepas pandang kot..2 link tutorial yg lin boleh belajar ialah..

    1)http://www.padinno.com/2010/10/ingin-kelihatan-kemas-dengan-autoslide.html

    2)http://redboys.info/?p=54

    sila lin cuba sana dulu ye…kalau ada apa2 masalah sila bgth..

    Reply
  • November 21, 2010 at 5:38 am
    Permalink

    cik tom syg ~ wuuuuu 🙁
    tak dpt buat pon
    japg sy buat satu entry khas utk awk tlg sy …
    welcome back to my blog utk tgk agak2 ape eh slh sy mase sy buat sidebar nih..

    Reply
  • December 10, 2010 at 6:04 pm
    Permalink

    yeayyy!!!
    b'jaye..
    tq aww..
    heheeh 🙂

    Reply
  • December 15, 2010 at 2:16 pm
    Permalink

    kat ne nk tick kat expand widget template ?

    Reply
  • December 22, 2010 at 6:25 pm
    Permalink

    yang ni try tak berjaya sbb coding dia tak sama dgn cik tom nye contoh.. try satu2 tapi tak jadi.. last2 naik error.. seramm lak jz.. trus stop. hehe.. nnt try lagi 🙂

    Reply
  • December 28, 2010 at 4:15 pm
    Permalink

    kalau nk tuka guna image lak camne code dia?

    Reply
  • January 6, 2011 at 3:07 am
    Permalink

    cik tom..
    saya pnya teda side bar laa..
    dah tgk suma..
    mcm na nak wat nie?

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

    saya punya takde lah code sidebar tu… so macam mana?

    Reply
  • January 11, 2011 at 10:32 am
    Permalink

    @MiSzy DiaN: cadangan cik tom cuba tambah coding…yang cik tom bg dlm entry tue atau tambah coding ni;

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

    **tambah coding diatas selepas code

    .post {

    dan follow step seterusnya…cuba menjadi x??

    Reply
  • January 11, 2011 at 10:33 am
    Permalink

    @Fairuz fazilah: tak dapat tgk blog sebab xdpt buka profile la…sama dgn diatas..

    cadangan cik tom cuba tambah coding…yang cik tom bg dlm entry tue atau tambah coding ni;

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

    **tambah coding diatas selepas code

    .post {

    dan follow step seterusnya…cuba menjadi x??

    Reply
  • January 26, 2011 at 2:57 pm
    Permalink

    ciktom, camne nak kecikkan tulisan dia?sy punye jadi besar gabak lak…

    Reply
  • January 30, 2011 at 12:40 am
    Permalink

    @aanie: untuk ubah size font…cik tom refer pada coding blog akak…pada code bawah ni sila tukar size font yang "13px" tue kepada mana2 size yang akak suka ye…

    <Variable name="widget.title.font" description="Title Font" type="font"
    default="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

    Reply
  • February 3, 2011 at 4:39 am
    Permalink

    cik tom~~linda dah buat,sampai lebam mata..hehe!alhamdulilah,ok!

    Reply
  • February 10, 2011 at 4:19 am
    Permalink

    cik tom, x jadi la….x jumpa .sidebar h2" atau
    .sidebar.widget.h2

    yg ni pun x jumpa…huhu…
    .post {

    ari tu jd besar gabak..x igt godek2 cmne…

    Reply
  • March 1, 2011 at 3:09 pm
    Permalink

    saya punye code bukan num mcm cik tom .tp dye tulis "textcolor" 🙁

    Reply
  • March 11, 2011 at 10:39 am
    Permalink

    tolong!
    sye tak jumpa code debar 2!
    TOLONG!

    Reply
  • March 29, 2011 at 2:24 pm
    Permalink

    cik tom: sy pon xley lar..kuar error jew..poning dah nie..tlg…
    sy punyer coding mcm nie

    sidebar .widget h2 {
    no-repeat 2px .25em;
    text-shadow: 0 0 $(title.shadow.spread) #000000;

    letak coding cik tom xley lar..nape ekkk???

    Reply
  • April 4, 2011 at 4:34 pm
    Permalink

    @mlle tqa; cik tom dah cek code blog tqa pnye code ni;

    .sidebar h2 {
    margin: 1.6em 0 .5em;
    padding: 4px 5px;
    background-color: $sidebarTitleBgColor;
    font-size: 100%;
    color: #333333;

    pada code "color: #333333;" ni..tqa ubah code "#333333;" kepada warna yang tqa nak…just follow step utk tukar code warna cam kat atas..dpt x?

    kalau xdpt..sila tambah code;

    background:#F52887;

    di dalam code tqa dgn gantikan pada code color sebelum ni..cnth;

    .sidebar h2 {
    margin: 1.6em 0 .5em;
    padding: 4px 5px;
    background-color: $sidebarTitleBgColor;
    font-size: 100%;
    background:#F52887;

    Reply
  • April 4, 2011 at 4:41 pm
    Permalink

    @mas nurul najihah;pada edit html..search word "sidebar content"…cuba tambah code ni pada code bawah "sidebar content" mas…

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

    cuba buat..good luck!

    Reply
  • April 4, 2011 at 9:01 pm
    Permalink

    @aseta; salah letak coding tue yunk…camni;

    sidebar .widget h2 {
    no-repeat 2px .25em;
    text-shadow: 0 0 $(title.shadow.spread);
    background:#F52887;
    {

    cuba try..menjadi x..

    Reply
  • April 17, 2011 at 11:14 am
    Permalink

    thanks cik tom ! :))
    dah lama saya cari tutorial ni.
    thanks again !

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

      sama2…eh tak tinggal pulak url blog nasya..

      Reply
  • April 27, 2011 at 10:54 am
    Permalink

    salam cik tom. saya dah try buat banyak kali dah ..tak jadi jadi pun ..huk huk sedihnye … apa kata cik tom buatkan untuk saya .. then saya bayar ..serius nie … nanti cik tom hubungi saya balik ya …
    Jom baca entri terkini eyna azmi …BEN ASHAARI KENANG MASA SEKOLAHMy Profile

    Reply
    • April 27, 2011 at 4:50 pm
      Permalink

      cik tom busy..xdpt janji nak buat..nanti cik tom cuba tgk coding awakk ye..tp cik tom xnaklah amik bayaran..ikhlas je..erm apa2 cuba kontek email cik tom ye; tomatogurl86@gmail.com

      Reply
  • May 14, 2011 at 1:21 am
    Permalink

    cik tom maaf saya da tukar template.tapi still tak jumpa la sidebar tu.kenapa ek ?? 🙁
    Jom baca entri terkini nurul atiqah …Hari yang tak kenaMy Profile

    Reply
  • May 23, 2011 at 12:11 pm
    Permalink

    jadi pon , senang je rupenye , kena fahami coding2 tu dulu baru try edit .
    Jom baca entri terkini tengku nizam …Sejarah PolisMy Profile

    Reply
  • July 3, 2011 at 4:11 pm
    Permalink

    xbole nak buat la ….. dah la x jumpe coda sidebar tue :'(
    Jom baca entri terkini ainaa …k-popMy Profile

    Reply
  • November 11, 2011 at 9:53 pm
    Permalink

    Tak jumpaa code sidebar lhaa :3
    Dah puas cari :/
    Jom baca entri terkini Athirah …ESOKMy Profile

    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.

error: Content is protected !!