BASIC : turns your template to washed denim template

nak template washed denim macam una ? mehh kita nelajar mehh , hatihati tau waktu guna coding nie semua :) and before tukar pasti kan korunk copy dulu coding lama ? takut nanti tak jadi pulakk kann ? soo , be carefull , nanty rosak pulak blog yang omei2 tuh :)
okeyy , jom start ? firstly apa yang perlu korunk buat ialah , go to DASHBOARD > DESIGN > EDIT HTML then korunk scroll ke bawah nanty akan nampak select layout template  click saje , then nanti dia akan keluar seperti ini :

korunk click button yang washed denim tuh then korunk SAVE TEMPLATE tuh dah dapat template baru :) and view lah blog korunk , nie contoh gambar nyer kayy :

thenn kita nak masuk kan Background blog for this template , ikut step nie kayy :
Dashboard >> Design >> Edit HTML then tekan ctrl + F and cari code nie .
body {
dekat bawah body tuh kan ? korunk copy paste coding yang una bagi nie & gantikan saja code tuh :
body {
background: url(Background image);
background-attachment: fixed;
background-repeat: repeat;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: #000000;
font-size/* */:/**/small;
font-size: /**/small;
letter-spacing:1px;
}

lepas tuh korunk preview kay ? hahh  , dah ade background tapi tetiba nampak ade warna putih pulak kat header dia ? ouhh , jangan risau , jom transparentkan header dia kayy :
click ctrl + F search code nie :
/* Variable definitions
   ====================
 then korunk dekat bawah tuh ade anak-anak code dia , korunk search code yang ade mcm nie .
 <Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="#ffffff" value="#ffffff">
dah dapat cari korunk gantikan code di atas dengan code yang baru una bagi nie :
 <Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="transparent" value="transparent">
tadaaa , dah transparent pun header korunk :) chomell kann ? soo , mehh , kita buat header dia pulak kayy , ade dua :) satu yang bersambung ngan main body , lagi satu yang tak bersambung , jom belajar satu-satu kay :
Header bersambung dengan body
(harap faham lah yer?tak pe papehal tanya je una kay?)
contoh yang bersambung punya 
contoh yang tak bersambung
explanation :
yang ade tuto using adobe tuh kan , yang tuh untuk header yang bersambungpunyer , kalau nak buat yang tak bersambung same je stepnyer cume korunk tak perlu buat rectangle rounded tool tuh jer yang lain-lain tuh korunk buat lah kayy ? senang jer kann ? then kalau buat yang no tittle tuh kan ? una guna width nya 760px and height dia 300px kite leh jer buat body die jady melengkung cam una punya blog nie :) soo , mehh kita buat kayy :
click ctrl + F and cari code nie .
#content-wrapper {
then bawah dia ade anak-anak code kann ? hahh , ganty kan saje dengan code yang una bagi nie kayy .
width: 760px;
margin: 0 auto;
padding:15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
}

yeayyy ! siap blog korunk ! senang kan nak buat ? yang border melengkung tuh dia atas bawah tau ? try lah scroll sampai habis :) whee :D harap-harap korunk faham lah tuto una nie kayy ? harap dapat bantu korunk yang newbie lagi nak guna washed denim template nie :) ganti je coding yang una bagi nie , for sure korunk boleh dapat punye lahh :) yang untuk sidebar post tittle boleh rujuk dekat Tutorial una kayy ? tapi kalau nak una buat untuk part-2 punye una mahu tggu request je :) kalau ramai request una terus kan kayy ?

nota kecil :
semoga berjaya ~

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

141 comments:

  1. like like nti kak dyan nk cuba :)

    ReplyDelete
  2. salam . nak tnye . awak edit header tu dkt mane ek ? :)

    ReplyDelete
  3. una buatlah yg part 2 punye !~ please-pleasee !~

    ReplyDelete
  4. thaaaaaaaaaaaaaaaaank you very much kaaak. Nak part 2! :D

    ReplyDelete
  5. da jadi , tp why wrna tlusan dya wrna bru ? cm new na tkr wrna pinkea .

    ReplyDelete
  6. grr una, saya gagal pada step masukkan backgroud itu :(

    ReplyDelete
  7. mcm maner pulak bolhe gagal ?
    ape yang tak kene?

    ReplyDelete
  8. tak tahu. dah cube banyak kali, tetap gagal :(

    ReplyDelete
  9. Una nak buad header tuu kat mane? Adobe Photoshop ke?

    ReplyDelete
  10. sy suka tuto nie! dh cuba n success...:)

    ReplyDelete
  11. kat mane nak carik background tuh ? :D

    ReplyDelete
  12. Macam mane nak letak background? tak jumpe pon :(

    ReplyDelete
  13. Una, kat mane nak letak header tuh? I mean header tu nak letak kat code yg mane?

    ReplyDelete
  14. mcm maner tuh eihhh ??
    una tak faham ?

    ReplyDelete
  15. excuseme , nk tye . mcmmne ea nk save photoshop trnsparent ? tk reti

    ReplyDelete
  16. salam . kak una , nak tanye , macam mana nak buat transparent dengan terus tulis . fatin buat tak boleh keluar tulis pun ? harap kak una boleh tolong ~

    ReplyDelete
  17. wslm :) nak terus transparentkan header & tulisan ?
    macam mane tuh yer dikk ?
    akak tak faham ??

    ReplyDelete
  18. ehe , fatin tersyasyul XD maksud fatin macam mana nak buat transparent , lepas tu tulis tajuk header kita . ha ~ baru betul . hehe .>//<

    ReplyDelete
  19. una yg edit header tu kena guna editor apa ? photoshope ke? thanks

    ReplyDelete
  20. una , mcm mne jarakkn header tu ngn main body .. mcm una ny header tu ?

    ReplyDelete
  21. akak, cmne nk download photoshop?

    ReplyDelete
  22. Saya tanya macam mana nak letak header kat blog? Sorry kalau Una rase mcam menyusahkan hehe

    ReplyDelete
  23. nanty una try buat tuto dor basic in blogger kayy?

    ReplyDelete
  24. kak una Bila saya masukkan backgrund kan kat Edit HTML tu kan , kak una suruh letak background kan?
    Saya dah letak link tuu tappi Tetap putih !
    Xde background !!!

    ReplyDelete
  25. Kak Una , saya cube letak link yang kak Una kasi tapi kenapa tetap putih ?

    ReplyDelete
  26. Akak farina guna tuto nie untuk tuto farina punya blog boleh tak ?

    ReplyDelete
  27. assalamualaikum kak una ^_^
    alya nak cakap thank you so much sbb buad tuto ni.
    tuto kak una mmg the best of the best lah!
    senang faham. keep up the good works kak una! :)

    ReplyDelete
  28. Kita ikut tuto sinie.. Thaaaankksss :)

    ReplyDelete
  29. saya dah buat,, menjadi larh.. thanx.. ^^

    ReplyDelete
  30. kak una, syer ta de Adobe photoshop cs5 laa . try downdload ta dpt pown . crack ckit kt mna . mna kowt . cmna nie ? bleyh tlng ajarkan mcm na nk download ?

    ReplyDelete
  31. yesyesyes !
    akhirnya selepas berpuluh-2 kali buat ,
    jadi jugakkk .
    thnkiu so muchhh !!

    ReplyDelete
  32. sys . saya punye background tho tak keluar lha . die jady putih jea . saye dha tak tau nak buad macam mane dha niy . belog saye dha putih semua . soryy meyusahhkan :(

    ReplyDelete
  33. akak nak tanya
    1. cane nak wat background bintik-2 mcm akak ny??
    2. cane nak besarkan saiz blog??

    ReplyDelete
  34. Una, kenapa nak masukkan background tu tak boleh? Dah masukkan linknya, tapi still putih macam asal punya. Macamana eh?

    ReplyDelete
  35. una ? saya punya tak jadi. bila tukar dia terus jadi besar --'

    ReplyDelete
  36. Sys , saya tak jumpa lahh select layout template tuhh. Puas dahh cari TT_TT

    ReplyDelete
  37. kak una . cth kite da wat header tu . lpas2 mcm mne nak masukkan ?

    ReplyDelete
  38. kak una . sofea x pandailah nak download photoshop nie semue . boleh tlg ajarkn x ?

    ReplyDelete
  39. dah jadikkk.....thannzzzzz bnykkk2 k kak una....:D....

    ReplyDelete
  40. tq..tq n tq so much akak...
    mulanya sedih coz blog kena hack..
    akhirnya happy coz kak una wt tuto ni..
    utk dletakkn kt blog sy..

    storyofbudakjambu.blogspot.com

    ReplyDelete
  41. kak una,nape kalau saya buat border melengkung tu tiba2 sidebar pergi bawah post?minta tolong ya..:))

    ReplyDelete
  42. kak una, terima kasih for the tuto. now, blog kite dah xserabut dah. thanks yee akk. ;)

    ReplyDelete
  43. kak una, boleh tunjukkan tutorial untuk buat header tu bercantum dgn body . Plis~ :)

    ReplyDelete
  44. emm kaq macam mnew nk dpt kan header uh mksudnye header uh nk dpt kt ne ek?

    ReplyDelete
  45. akaq mcm mnew akaq dpt header uh?dpt dry mnew ek?

    ReplyDelete
  46. kenapa background nya tak keluar yer???
    dah pening sangat....
    dah try banyak kali tapi tetap tak boleh....
    dia putih jer....
    macam mana ek nak buat??/
    hehhe^^
    thx

    ReplyDelete
  47. una, nak tanya. kenapa saya bt header bersambung tu tak jadi? die pnye rounded rectangle tu jadi tak sama size dgn witdh page

    ReplyDelete
  48. kak una kenape blog najiha dye jadi lain

    ReplyDelete
  49. una , naz try tak jadi pun .. yg part background tu .. wrne putih je ..

    ReplyDelete
  50. dah jadi tp tak tahu nk buat header tu..tolong :(

    ReplyDelete
  51. Kenapa aien buat tak jadi ? Huh sumpah pening :(

    ReplyDelete
  52. akak mcm mne nak buat header tu ? sya tak pham la , hrap akak bleh bntu sya <3

    ReplyDelete
  53. kak una , mcam mana nk transparent kn header tu ? sye x faham ..

    ReplyDelete
  54. Kak una ! Tengs for the tuto . I'm using it .

    ReplyDelete
  55. kakkkkkkkkkkkkk...............cmner nk wt kt ps tu..xthw nk pkai bnda alah tu.. adoii !!

    ReplyDelete
  56. nape bckground tetap jd colour putih . . . xjd . . cm ane nie ?

    ReplyDelete
  57. Kak Una, urgent !!
    Kenape bile saya dah tukar template,
    edit template saya kosong !
    Saya tak sempat nak copy edit html yg dulu,
    macam mane nie ?
    pastuh, bile saya nk ltak background, tak jadik :(

    ReplyDelete
  58. kak una,,
    washed denim ni sng gune ke ?

    ReplyDelete
  59. macam mane nak tukar kod tu ea ?
    tak reti ??

    ReplyDelete
  60. knpe bckground sy ttp jugak wrne putih ni?

    ReplyDelete
  61. Sis, nak tanya, kenapa sidebar text pun transparent?

    ReplyDelete
  62. kak una , apa font buat header tu?

    ReplyDelete
  63. Done ! Tapii mcm mana nak buad header ?

    http://fatinsyafiqahlotfi.blogspot.com

    ReplyDelete
  64. Tk jadi lhh .. background tk keluar ponn :(

    ReplyDelete
  65. Macam mana nk bt header eh ? guna ap ?

    ReplyDelete
  66. tak bjaye lahh ;( tak pham kat copypaste code then GANTIKAN ? gantikn cmne ekh ?

    ReplyDelete
  67. kenapa kite buat tak jadi ? :(

    ReplyDelete
  68. knp putih jer ? plizz , nk keterangan details .
    xder mcm background yg k.una bg tuh :(

    ReplyDelete
  69. okay , pgang kate2 k.una , practice make perfect .
    huh , finally dpt buat jgk background tuh , kte amek purle ye .

    ReplyDelete
  70. nk insert tlisan tuh mcm mne k.una ?
    lisan tuh da buat , code tuh da copy , tp tlisan jer x tawu nk mcok kn mcm mne

    ReplyDelete
  71. k.una , yg melenkun tuh mmg jd , tp xder tlisan , mcm mne nk msok kn tlisan tuh ?
    tlg yee :(

    ReplyDelete
  72. Dah jadi! :D terima kasih sangat sangat <3

    ReplyDelete
  73. terima kasih kak una for all the tuto.nnti saya credit akak, skrg x boleh sbb blog tgh ada masalah.. boleh kak una tlg tgk blog saya tak? sbb saya x tau nk buat mcm mana bg main dgn sidebar tu tak mcm tu..

    ReplyDelete
  74. kak una mcm mne nk masokkan url background tuh da masokkan tapi tak dpt

    ReplyDelete
  75. kak una.. amek satu tau. thanks

    ReplyDelete
  76. finally, berjaye lah sis. thanks sis!!

    ReplyDelete
  77. kak!~ saya dah cuba cari washed denim takde pon..tolonglah!!

    ReplyDelete
  78. mcm mne eak??x jadik pon~:(
    akk wat header 2 kat ner eak..

    ReplyDelete
  79. kak una..saye nak gune washed denim punyer templat..tp knp tak leh nak letak background?saye try ikut tuto kak una ni..tp still tak boleh..mcm mane ni ye?

    ReplyDelete
  80. sye da buat . wow , terer laa kak una. fufu cuma yg titile tu -.- complicated! tkley

    ReplyDelete
  81. : knp nk hlgkn yg header 2 xley ?? bler buat je mesti xley .

    ReplyDelete
  82. salam..mcm mn nk tukar ke denim skarang sbb blog dashboard kn dh jd lain?

    ReplyDelete
  83. Saya guna TUTO Nuna...Tq so much

    ReplyDelete
  84. Kak Una . Macam mana nak tuka dari blogskin ke washed denim ? Susah laaa ;[

    ReplyDelete
  85. Kak Una . Macam mana nak tuka dari blogskin ke washed denim ? Susah laaa ;[

    ReplyDelete
  86. kak una :) harap dapat balas:) saye ade masalah dekat part background image macam mane tuu??

    ReplyDelete
  87. kak una , nape blog saye jadi mcm ni ? tlg tgk jap . akak tekan older post and tgk thanks http://rajanora.blogspot.com/

    ReplyDelete
  88. Alhamdulillah, thanks kak Una for this tuto !! Menjadi ;)

    ReplyDelete
  89. kak una , kalau buat header tu pakai photoscape tak leh eh ?

    ReplyDelete
  90. hai, saya guna template awak. thanks sangat2

    ReplyDelete
  91. skrg bentuk dashboard pun da berubah. camana tu??

    ReplyDelete
  92. kak una, kakak boleh tak tolong buatkan arah blog ku ...? please...

    ReplyDelete
  93. kak una, boleh tak kakak tolong aku buatkan.. ?please...

    ReplyDelete
  94. terima kasih ye kak una! sye mmg perlukan sgat2 tutorial psal nie.. terime kasih banyak2!! :D

    ReplyDelete
  95. Kak Una! U r the best! skrg sy dh boleh buat tmplate utk bskins sndri ^^

    ReplyDelete
  96. err -,- sampai dekat nak buat header transparent tu . tak jumpa kod bgcolor tu . saya tak tau kowt salah tekan bukan denim washed ka sbb skrg kan dashboard dah tukar baru . Btw , saya skrg back balik blogskin . but try to do template denimwashed jugak . so nanti akak balas dekat blog saya boleh . pleaassee *buat muka sedeyy* hehe

    ReplyDelete
  97. kak Una ..saya x paham la part ganti kot untuk header tu..

    ReplyDelete
  98. Hello my friend! I want to say that this post is awesome,
    nice written and include approximately all important infos.
    I would like to peer more posts like this . http://birdcam.

    backyardwildlife.com/modules.php?name=Your_Account&op=userinfo&username=SilasEddie
    Have a look at my webpage ... throwing

    ReplyDelete
  99. Thanks for one's marvelous posting! I certainly enjoyed reading it, you may be a great author. I will be sure to bookmark your blog and will eventually come back sometime soon. I want to encourage you to ultimately continue your great work, have a nice morning!
    http://www.collybs.com/railfarewatch.co.uk/tiki-index.php?page=UserPageizettawatt
    Feel free to visit my homepage :: booker

    ReplyDelete
  100. What's up colleagues, how is the whole thing, and what you would like to say regarding this article, in my view its actually awesome in favor of me.
    http://russianloved.com/LowellCast
    Also visit my website yachtcharter müritz

    ReplyDelete
  101. I have been exploring for a little bit for any high-quality articles
    or weblog posts on this kind of area . Exploring in Yahoo I eventually stumbled upon
    this site. Studying this info So i am happy to convey that I've an incredibly good uncanny feeling I came upon exactly what I needed. I so much undoubtedly will make sure to don?t overlook this site and provides it a glance regularly.
    http://www.ocadia.de/user/profile/danielstei/
    Also see my website: customers

    ReplyDelete
  102. Good post. I learn something totally new and challenging on sites I stumbleupon on a daily basis.
    It's always useful to read articles from other authors and use something from their web sites.
    http://bookall.net/blogs/user/HarryThv
    My webpage lyricsrob

    ReplyDelete
  103. sys, macammana nak tukar template washed denim kalau guna new interface ?

    ReplyDelete
  104. akak. Skrg punya dah jenis lain lah kak. Pening. Tksama. Bleh tk akak tunjukkan cara yg skrg punya :D thanks kak :)

    ReplyDelete
  105. kenapa tak jumpa select layout template tu? :/

    ReplyDelete
  106. kenapa tak jumpa select layout template tu? :/

    ReplyDelete
  107. x faham , macammana nak buat header guna photoshop tu ?

    ReplyDelete
  108. Akak, macam mana nak tukar blogskin ke denim washed tu? Adek tak tau laa. Dah cari design yang akak kata tu, tak ada pun. Yang ada template jahh :'( Akak, tlg please. Buat tuto or PM adek dekat FB, Mardhiyah Hasbullah :) Thanks.

    ReplyDelete

Assalammualaikum and Hye to all Blogger. Harap anda tidak mengeluarkan sebarang bahasa yang kasar ATAU keterlaluan untuk di baca. Ada apa-apa pertanyaan? Sila komen sini.. =TERIMA KASIH=