Cara Membuat Template Blogger

Saturday, June 20, 2009

Gimana si Bong cara membuat template blogger / blogspot sendiri? Pertanyaan itu sering mampir. Cara membuat template blog, jujur, binun aku njawabnya kekekekeke soale bikinnya ga sistematis, ya pertama belajar tentunya edit template minima yang udah ada (anggep aja sebagai kerangka, toh itu ga ada designnya, cuman kerangka kode aja) . Tentu aja bikin template dengan sistem coba coba ngabisin waktu dan banyak errornya *ekting mewek* . Lalu lama lama menjadi terseteruktur. Langkah membuat design template blogger sendiri menurut diriku ya kek gini loh

Ngitung Ukuran
Seperti halnya mau merancang baju, kita pan musti tau ukurannya dulu. Tentukan dulu template nya mau dua kolom (main post dan satu sidebar) atau tiga kolom (main post dan dua sidebar). Seperti ini screenshootnya itung itunganku hehehehe



Nggambar Design
Bagian ini menurut diriku yang susah.Yaitu design. Silahkan dipikirkan masing masing pengen design kaya apa. Design meliputi, pemilihan warna (jangan sampe tabrakan tur ga metcing) , layout, gambar, element tambahan (menu, search, feed). Design kemudian di gambar sesuai dengan ukuran yang tadi uda ditentukan. Ini pas diriku nggambar designnya pake inkscape. Kalau buat template yang banyak menggunakan gambar dan tentunya pengen unik ya musti nggambar design dulu, kecuali buat cowok yang lebih banyak main garis ama warna aja. Hehe..


Partisi Design
Maksude apa Bong? Kok kaya harddisk aja dipartisi. Maksudnya memisah misah gambar sesuai ukuran masing masing elemen. Jadi gambar buat background header, dipisah, buat footer dipisah, buat sidebar juga. Kalo pake photoshop ada tools yaitu slice untuk mengiris ngiris gambar sesuai ukuran design. Kalo pake inkscape, ya tinggal di grouping aja di export jadi format png.

Upload Gambar
Setelah jadi gambar untuk backrgoundnya, silahkan diupload ke imagehosting masing masing. Misalnya Photobucker, Imageshack, Tinypic, dan lain lainnya. Yang diperlukan nantinya adalah URL gambar tersebut untuk dipasang di HTML nya.

Edit HTML
Silahkan create new blog dan pilih template minima. Kok ga pake software Bong? kaya dreamweaver gitu? Lah kita kan belajar praktis. Kalok pake Dreamweaver atau software webdesign lain lhak musti belajar tools toolsnya dulu, hehehe kalo ini kan kita udah disuguhi struktur kerangka layout yang siap diolah, tak iye. Hayoook jadi lanjut ga nih? Baiklah Bong. Lanjutkan, Lebih Cepat Lebih Baik Bong. (ngakak dot kom aku je)

Kenali Struktur HTML
Pada dasarnya template cukup dengan 4 elemen yaitu header, sidebar, post, dan footer. Untuk lebih lengkapnya silahkan kunjungi Catalog Kang Jaloee , baca dulu sebelum nanya ya. Curhat colongan, sebel juga kalau ada yang nanya sedangkan dia nya belum baca, padahal semua sudah ditulis lengkap. Pengen tak iris tipis tipis type orang kaya gini.
Sekarang silahkan di edit ukuran lebar masing masing elemen sesuai dengan itungan awal misal header 920px, sidebar 170px, main-wrapper 500px.

Menambah Background
Setelah semua ukuran sudah pas, silahkan di edit color, font, sesuai yang diinginkan. Lalu kita pasang background gambar yang sudah dibuat tadi.

body {
background:url(http://URL-gambar yang sudah diupload) ;
}


header-wrapper {
background:url(http://URL-gambar untuk header yang sudah diupload);
}

begitu seterusnya.


Ini hanya gambaran step step globalnya aja. Hehehe semakin banyak elemen, semakin banyak menu, semakin banyak detail, semakin njlimet lah pekerjaan itu. Selamat berkarya membuat template blog sendiri

You Might Also Like

125 comments

  1. ini yg aku cari,makasih ya bong! Mau belajar bikin template nih. Suatu saat nanti nongol dgn template sendiri tp saat ini mo off dulu...

    ReplyDelete
  2. Iso tak prakteke i.. daripada mumet ngedit2 tapi hasile urak memuaskan yo mbak..

    wkekekekkeee...

    ReplyDelete
  3. Wah wah mantep banget tutorial bikin desain blognya nih..

    Smangat terus ya berbagi tutor dengan teman-teman blogging.. :)

    ReplyDelete
  4. boleh juga dicoba nih..dari dulu saya pengen buat template hasil karya sendiri....

    ReplyDelete
  5. :f: hihihi... keenam....

    baru baca lagi.... nanti komen juga hohoho...

    ReplyDelete
  6. Nyimak doank, soal buat'x diserahkan langsung ke mbak e.... Hahahhaahaa.... :f:

    ReplyDelete
  7. ketujuh... hihihi... ilmu yang keren bgt mbak bong... nanti aku coba dehh...

    ReplyDelete
  8. keren,, bagi2 ilmunya.. heheheheohoho

    ReplyDelete
  9. seep bong
    makasih ya gak pelit share ilmu
    cebong baek deh
    :)

    ReplyDelete
  10. wah ini ada tutor sederhana,, makasi bong,, :j:

    selama ini masi ngedit template orang muluw =.= semoga kedepan ada kreasi asli bikinan dewek..

    eh domain baru, mampir ya.

    ReplyDelete
  11. Mangtapppsss... huehue, ditunggu edisi selanjutnya :h:

    ReplyDelete
  12. makasih ebong sayang udah bagi-bagi ngelmu..wes tak bookmark ya sapa tau mau mbajak template orang xixixixixi

    ReplyDelete
  13. header, sidebar, post, dan footer itu apa to mbak Bong..??? Kwakkk..kkk...
    Ntar ku iris tipis2.....biar langsing aku mbak Bong...he..he...

    KOde HTML kok bikin Prof keder ya...???

    ReplyDelete
  14. wah diriku gak pinter gambar kii piyeee

    ReplyDelete
  15. mumet mbak bong....
    oiya nanya neh, cara masang banner gimana yak....terus bikin banner gimana ya.....kalo pertanyaannya salah aku jangan di iris2 tipis ya mbak....please....

    ReplyDelete
  16. @buwel: silahkan di cari di label sok tutorial ya kang buwel..sudah tak tulis

    ReplyDelete
  17. Akhirnya cebong buka rahasia juga :e:

    ReplyDelete
  18. aku suka sama warna2 desaigmu piet, ciamik. warna2 pastel kesukaanku ;)

    ReplyDelete
  19. kok saya baca dari atas sampai bawah sudah 5x masih gak ngerti-ngerti ya? ... ah enakan nunggu hasil kerja mba' adminnya aja deh, gak perlu repot-repot belajar lagi ... :D

    /* kaburrr ahhh sebelum mbak adminnya iris-iris diriku ... */

    ReplyDelete
  20. hihihi, aku jangan diiris tipis2 bong ... takuuutt ... *sering nyusahin cebong dengan pertanyaan gak pentingnya* :p

    Anyway, itu bisa ya satu page gituh ?? waaah baru tau :p, coba aaahh :D

    ReplyDelete
  21. wah harus langsung praktek nih

    ReplyDelete
  22. @om agus: woiyo...monggo
    @fenty:whehehehe bukan dirimu mbak e , satu page yg mana yak?
    @nomercy:jgn gitu mas, kan dirimu malah bisa bikin WP, :a:
    @jengsri:hehehhe kita kan cewe feminin ya jeng :f:
    @taktiku:besok buka warnet

    ReplyDelete
  23. aduh.. liat itung2annya dah mumet duluan,
    belom lagi desain nya,
    amatir, gak bisa,
    yang terima jadi aja dch, tapi kapan2 aku mo buat sendiri juga ah,
    pasti lebih puas, hasil sendiri mah ya,
    muter lagi ah, nyari inspirasi.

    Yup !

    ReplyDelete
  24. thanks atas informasinya , lam kenal ya

    ReplyDelete
  25. Itung2ane koq pake sisa, maksud-e piye to Bong.?

    ReplyDelete
  26. cool!!!
    ntar aku cobain...
    makasih y mbak ebong....
    seneng deh sering2 maen ke sini...

    ReplyDelete
  27. wah aku ngga ngerti,

    itu yang notepadnya buat apa? (katro mode : on)

    ReplyDelete
  28. waduw banyak banget yah tahapan-tahapannya..

    ReplyDelete
  29. bong bikinin template dong... gratissss yaaaaa :D

    ReplyDelete
  30. kayaknya muda tp klo di coba susahhhh...... pake dreamweaver yahhh

    ReplyDelete
  31. walah aku ra ngerti bong
    ra tau pake wordpress
    he3x..
    eh dukung aku kontes SEO Stop Dreaming Start Action

    iki link e nek gelem
    http://annosmile.jogloabang.com/kontes-seo-joko-susilo-keyword-stop-dreaming-start-action.jsp

    matur nuwun....

    ReplyDelete
  32. Pusing duluan sebelum mencoba. Takut eror.. Terima nasib aja dah!

    ReplyDelete
  33. Keren nuy Mbak... Bookmark dolo... :D

    ReplyDelete
  34. Ayo lanjutkan, lebih cepat lebih baik. Ditunggu selanjutnya Mbak. Saya pro MbaBong.

    ReplyDelete
  35. jiaaaaaaaaaaaaaah... mbak ebong!! keren2... :d:

    ni dia nih, yang ditunggu tunggu... xixixixixixiix.... ;))

    ReplyDelete
  36. angel bonk...kalo gambarnya pake paint bisa gag

    ReplyDelete
  37. top bong! mantap!

    ReplyDelete
  38. huaa.. ndak mudeng aku bak bacanya,, hikz.. :i:

    udah deh aku pake templet yang ada aja deh,, lagian tempelt dari mbak kan bagus2,, aku suka warna2nya..

    ReplyDelete
  39. matur nuhun bong tutorial'e. kapan-kapan *kapan ya?* kalao punya kompi sendiri tak belajar. kalao belajar nang warnet banyak gannguan, engga bisa konsen *sejak kapan Eros bisa konsen?* suer saya pingin bisa bikin template sendiri bong.

    ReplyDelete
  40. bingungggg akuuu...

    sing plenting komeng sek ahhh...:c:

    ReplyDelete
  41. Waaaaaaau... ngunu wi yo kerjone wong Desainer Web... aku dadi pengen ki mbak... Nggawe sing Wordpress... tapi sik, belajar ngeblog dhisik wae... kare jalan, eh mlaku :D

    ReplyDelete
  42. hehehe.. puyeeeeng.. kliyengan.. susah yaaaa
    Salam Sayang

    ReplyDelete
  43. Nice Post, Mantab, artikel yang bermanfaat <----- *komengku rodho nggilani yo ben* :c:

    ReplyDelete
  44. He..he.. agak telat dikit posting tentang sherina :P

    ReplyDelete
  45. wahh.. tipsnya keren banget.. buat wordpress donk skalian...

    ReplyDelete
  46. sip..sip..suuuuiiittt...mantap tutorialnya..thx mbak

    ReplyDelete
  47. aku sudah baca, jangan diiris tipis-tipis loh...

    ReplyDelete
  48. siiip mbak bong...makasih, langsung di cari....

    ReplyDelete
  49. makasih atas saranya embak

    ReplyDelete
  50. Ada cara untuk membuat template untuk wordpress enggak??aku juga mau buat template sendiri niih hehehe

    ReplyDelete
  51. Waduh pke linkscape aku gak mudeng mb' tp nek potosop raiso....ki piye mb' trusen (pikiren dewe)
    Nice tutornya mb', salam kenal

    ReplyDelete
  52. @wh:salam kenal mas, makasi kunjungannya, dan makasi sudah bener manggil mbak wkwkwkkw
    @hamster:ron, maap blum bekunjung, ndak loding2 buka blog mu
    @ajiee: sara azhari kah? xxixiixx
    @buwel:weehhehehe silahkan ngubek2 saya jg lupa jundulnya, search aja ituh, kek nya cara membuat banner
    @bisnis:sama sama
    @advintro:endak kok, paling tak pecel
    @dio:makaci yah
    @senoaji:heleh es tede dweh
    @mas seno:gpp mas penting nyantol

    ReplyDelete
  53. nice post...makane master gawe templit kui pancen kudune posting ngene..

    hai bong..

    ReplyDelete
  54. wah ebong ngularin ilmunya..

    ReplyDelete
  55. wah mantabb tips yang sangat bermanfaat

    ReplyDelete
  56. trus, pertanyaan berikutnya :
    gimana sih, biar bisa komen urutan atas di blog ini?

    ReplyDelete
  57. how can i create my own template?

    http://wetemplate.blogspot.com/

    ReplyDelete
  58. aaah...... binguuuung...hahaha :D

    ReplyDelete
  59. aku mau pake punya cebong aja ah, yg udah jadi...tapi belum ada waktu buat kutak katik hihihihi....
    bikin ndiri mah katrok aku bong...mmm minta bikinin yg kupu2 warna ungu ada gak? huakakakakaka (kaburrr takut di lempar sendal)

    ReplyDelete
  60. muantapzzz sob postingannya.....
    dicoba2......
    thx ya

    ReplyDelete
  61. Keren nich.......... hebat Bong!!!!!!!!

    ReplyDelete
  62. Wach baru keren nich tutorial.........

    ReplyDelete
  63. wah, seru juga nih mba kecebong,,,

    pingin nyoba :D

    ReplyDelete
  64. biar tutore sederhana tapi esih mumet bae jere.

    ReplyDelete
  65. wah keren banget neh, makasih master dah mau bagi-bagi ilmu

    ReplyDelete
  66. kumplit...serasa dapat sesajen dari banteng hi hi hi :e:

    ReplyDelete
  67. Baru baca sekali n gak mudeng.
    Oon kali diriku ya bong.
    Ayo.. diwoco meneh..

    :Mugo2 gak diiris2 tipis2:

    Nambahi komeng,
    Dirimu sdh ta'add di blogku bong.
    Sudikah dirimu addku balik?
    Klo gak diadd, asli.. ngko ta'iris2 tipis2. Ben.

    ReplyDelete
  68. Waduuuuu...puyenggg,,
    Aq mbok gawekke template sing sip bong..:)

    ReplyDelete
  69. begitu seterusnya??? beh, lha seterusnya ki opo bong???

    ReplyDelete
  70. menunggu kiprah dirimu menulis tentang cara membuat template wordpress... wekekke..

    soale nek aku, yang saya lakukan hanya replace dan replace gambar yang sudah ada.. hahahaha...

    nek ukurane lebar post dan sidebare gak pas, yo tak pas-pasne karo sing tak inginkan.

    seringkali sih mlorot... hahaha...

    ReplyDelete
  71. This comment has been removed by the author.

    ReplyDelete
  72. makasi infonya . mo di coba ni . :h:

    ReplyDelete
  73. Kowe kok mlethik tenan tho utheke Bong? :C:

    ReplyDelete
  74. Udah tergambar sekarang mbak ebong...soale saya udah belajar CSS cuman malesnya itu lho...aku ga ahli ngerancang-ngerancangan..ngemodif aja dhe...

    ReplyDelete
  75. nice template ..........


    funny scraps
    A blog for all about humor and funny scraps….

    ReplyDelete
  76. harusnya sekarang ngangguk ngangguk sambil bergumam "oh gitu..." tapi nyatanya ga bisa karena aku belum mengerti. intinya, belum mengerti.

    harus belajar lagi :b:

    ReplyDelete
  77. mbok nggawe sing ono slide-e bong..

    koyo nggonku kaw lho..
    *nggonku garek copas, ora gawe DW*

    ReplyDelete
  78. @aprie: males prie, ndak berpungsi, arep tak isi opo jal ekekkeke, enek wi ning free template ku, tpi nek blog personal ndak wes
    @mocca:semangaaat

    ReplyDelete
  79. wah.. posting mbak CebongIpiet menggugah niat saya tuk nghidupin blog blogspot saya yg cuman saya bukak doang, lalu saya tinggal.. :c: :c: :g:

    ReplyDelete
  80. waduh gak mudeng babarblas aku

    ReplyDelete
  81. kayanya aku calon yg bakal diiris tipis2 nih mba.. hihihi..

    ReplyDelete
  82. masih burem ngikutin petunjuknya..., mending make yg udah kamu bikin ajah bong. sedot, jreng langsung kerennn!!!

    ReplyDelete
  83. inkscape? cari dulu ah... moga gratisan....

    ReplyDelete
  84. This comment has been removed by the author.

    ReplyDelete
  85. huahhh ..
    masih ngga ngerti. :k:
    tapi makasi yaa da ngasih tahu carany :h:
    bgs bgd de. lam kenal ..

    ReplyDelete
  86. mw d'cba dch...

    ReplyDelete
  87. huahahhaha thz abang cebong
    gitu dong!! bagi bagi ilmu!! mencerdaskan kehidupan bangsa *halah
    thz berat bro^^

    ReplyDelete
  88. Thanks bro.....
    Mesti nyobain nih, biar blogku punya ciri sendiri.
    :g:

    ReplyDelete
  89. mbak cebong pinter bgt euy..
    acarin mbak,newbi nii..:a:

    ReplyDelete
  90. udah buka Catalog Kang Jaloee pi bingung mw buka yang mana. kenapa dikasih link yang spesikif.... :h:

    ReplyDelete
  91. kakak...ajarin dunk...

    bingung ni masalah ukuran ma desainnya tu gmn...

    maklum masih amatiran.hehehehe...

    ReplyDelete
  92. wah mba bong jago corel ya?
    salut dah....
    patut ditiru.... tak bookmark dulu dah yang disini

    ReplyDelete
  93. :f:
    ketawa dulu ah....
    mba bong, bentar lagi puasa nih
    :c:
    maafin slam kalo ada banyak salah yang disengaja ya, serta tutur kata yang tidak berkenan...
    mohon maaf lahir batin
    :c:

    ReplyDelete
  94. maksudnya recent comment tuh kan nampiLin comment yg udah ada...
    udah ada darimana??? :b:
    baLes di sini

    ReplyDelete
  95. gmn klo langsung make buatan bu ebong ajah, hohoho, kyknya lebih praktis thu, susahnya yah, mbingungin pek, tapi apa salahnya belajar :D, jgn jgn di Btemplates thu punya bu ebong semua hahahah

    ReplyDelete
  96. kudu baca pelan-pelan, biar mudheng. baydewey, gambar di pojokan kiri, boleh juga tuh.. bikin mata betah di blog ini.. :d

    ReplyDelete
  97. berinformasi..tapi,saya tak berapa faham bahasanya..

    ReplyDelete
  98. tambah bingung Bong .......
    saya harus mulai dari mana ??

    anyway thanks untuk informasinya

    ReplyDelete
  99. kayaknya gampang ni

    ReplyDelete
  100. woi mantap tutorialnya....jadi pengen buat template sendiri......kayaknya lebih memuaskan deh buat blog kita

    good sharing

    ReplyDelete
  101. wah.. thx nih dah share, sekarang jadi ngerti dah...

    ReplyDelete
  102. good articles.......i wanna try your tips

    ReplyDelete
  103. klo struktur codingnya sama ga c kaya kalo kita mau bikin website..soalnya aku pernah buat template buat tumblr, tp sistem kodingnya beda..nah klo blogspot ini gmn ya sistem codingnya? :m:

    ReplyDelete
  104. http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif
    cacad

    ReplyDelete
  105. waduh...keren ni tipsnya....
    saya coba ya...
    kebetulan saya juga pengen bisa ni bikin template sendiri..he..he..he...

    salam kenal...

    ReplyDelete
  106. keren tutorialnya !!! :j:

    ReplyDelete
  107. Terimakasih banyak atas cara bikin themnya...
    ya...dijelasin lagi dong....biar lebih detatill...jelas..gitu...

    ReplyDelete
  108. ko aku kagak mudeng mudeng ya?
    apa salah makan?

    ReplyDelete
  109. tolong jelasin yang lebih detail downg, biar blog aku bagus ....
    http://kanghamdan.blogspot.com/

    ReplyDelete
  110. thanks infonya,,

    http://www.dije.web.id

    ReplyDelete
  111. makasih gan semoga bermanfaat ane baru buat blog 5 menit yang lalu tapi bingu apa yang mau dilakukan

    ReplyDelete
  112. terima kasih mbak, jadi bisa belajar membuat template :D

    ReplyDelete