Post navigation

Tutorial Buat Background Title Sidebar

Posted on by
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.

********************************************************
klik sini

This entry was posted in tutorial by ciktom. Bookmark the permalink.

About 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.

69 thoughts on “Tutorial Buat Background Title Sidebar

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

    bagus2, nice sharing.. 10/10

  2. @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…

  3. 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..

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

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

  6. 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..=))

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

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

  9. @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..

  10. @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

  11. @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

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

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

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

  14. @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 ;)

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

  16. 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…

  17. @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..

  18. 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..

  19. 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 :)

  20. @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??

  21. @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??

  22. @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"/>

  23. 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…

  24. 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???

  25. @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;

  26. @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!

  27. @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..

  28. Pingback: Tutorial Tukar Title Sidebar Background Kepada Icon/Image Cara 2 - Ciktom