Belajar membuat template sendiri (1)

Sebelum saya melanjutkan tutorial ini, saya mohon maaf bukan saya sok pintar dalam masalah hal ini pada dasarnya saya bukanlah seorang ahli web designer, saya hanya ingin berbagi ilmu kepada sobat blogger yang tentunya masih dalam tahap mengenal apa itu template blogger dan juga ini sebagai media catatan saya, soalnya saya mudah lupa :p . Tutorial ini bukan sifatnya harus seperti ini tetapi lebih dari sebagai pengalaman saya dalam belajar membuat template sendiri, saya memakai prinsp Try and Error , serta banyak bertanya kepada suhu-suhu blogger dan yang paling penting banyak membaca. Tutorial ini merupakan gabungan dari beberapa tutor baik lokal maupun luar, saya hanya merangkum untuk memudahkan saya tentunya dalam pengalaman membuat template sendiri :).
Mau baca buat yang penasaran?

Tutorial ini nantinya saya akan bagi dalam beberapa tahap, dan saya hanya ingin berbagi pengalaman saya dalam membuat template, dan tentunya template yang masih sederhana :p . Agar nantinya akan lebih mengenal apa itu template, sebaiknya kita kenalan struktur dari template itu sendiri.
Saya gambarkan dari struktur template minima yang menurut saya sangat sederhana, bisa di lihat struktur layout dari template :


Dimana saya sudah kasih pewarnaan dari masing-masing struktur tersebut :
1. Body : merupakan suatu gambaran area yang mencakup keseluruhan template
2. Outer-wrapper : merupakan suatu area yang umumnya terdapat bagian header, content dan footer 
3. Header-wrapper : merupakan blok area yang umumnya terdapat di atas dan berisi judul atau deskripsi dari blog kita. bagian ini juga bisa di modifikasi sesuai kebutuhan sobat
4. Content-wrapper : merupakan bagian dari outer wrapper yang umumnya content ini berisi main wrapper dan sidebar-wrapper.
5. Footer-wrapper: merupakan suatu blok area yang berada di bawah dan umumnya berisi data catatan mengenai copyright pembuat template atau bisa juga di isi widget
6. Main-wrapper : merupakan suatu blok area yang umumnya berisi post, date post, post footer, comments block dan bisa juga untuk menambahkan bagian add elements jika kita inginkan.
7. Sidebar-wrapper : merupakan suatu blok area yang umumnya berisi widget-widget, sidebar ini bisa di tambahkan., pada contoh ini saya memakai 2 kolom : yaitu 1 kolom main, dan 1 kolom sidebar. Kebutuhan kolom di sesuaikan dengan desain dan keinginan sobat.
Saya rasa cukup untuk pembelajaran bagaimana cara mudah membuat template sendiri bagian 1 dan tentunya kalau ada deskripsi yang salah saya definisikan mohon koreksinya, saya juga masih dalam tahap belajar. Semoga tutor ini bermanfaat bagi sobat blogger.

post signature

56 comments:

  1. yes yes yes (tengok kiri kanan dulu) akhirnya ngersain pertamax di sini)

    tutor bikin template....lanjut bro dan suskes

    ReplyDelete
  2. sip deh,, ditunggu lo... /bisik

    ReplyDelete
  3. Salah satu alasan ku kenapa aku jadi "fans Berat" nya mochal ya ini...
    Gaya bahasanya lugas,tegas, n jelas...
    Salute fr Bro Mochal...!
    Success,Bro!

    ReplyDelete
  4. Waha..hahahahha Pertamaxxx /licik

    Suip om, bakalan berguna buat kita-kita yang masih bego /baca

    ReplyDelete
  5. wah telat gak jadi yang pertamx wis.....

    /hiks

    ReplyDelete
  6. Posting yang sangat bagus ...

    Manambah wawasan dan pengetahuan saya di bidang desain blog ...

    suhu mochal ini memang baik, senang berbagi .. makasih ya suhu ..salam hormat saya ...

    ReplyDelete
  7. /hore...mas mochal jadi jagoan bikin template...kapan2 klo aku pingin coba bikin template baru...bantuin aku ya...!!/bisik..ntar ku kasih sesuatu...

    ReplyDelete
  8. ternyata kita satu perguruan ya chal. tapi kok suhu kita tuh kadang berlagak kayak murid gitu ya /jedug /hehe /lari ah takut di /lempar buku ma suhu..

    ReplyDelete
  9. cc tunggu pelajaran selanjutnya ya a.. soale lagi mo belajar bikin template sendiri yg tewtep cool.

    ReplyDelete
  10. akhirnya keluar juga nih ilmunya, asik aku tunggu kelanjutannya /koprol

    ReplyDelete
  11. Wah asik nih kalau bisa buat template sendiri. oke deh... tutorial membuat templatenya aka saya ikuti terus. :)

    ReplyDelete
  12. hehehhe...makin keren nih./baca

    ReplyDelete
  13. wahhh kerenya minta ampyunn... ni suhu blog yang narsis alias si mochal... jiakakkaka /lari

    ReplyDelete
  14. Bikin template yang sip-sip chal... ntar ane pake (lagi) ya? he.. he.. he..

    ReplyDelete
  15. /hehe oh suhu nya Mochal Mbak Jaloee yah....salam yah buat Mbak Jaloee.../kembik2

    ReplyDelete
  16. waahh inpo menarik kang...lanjut dunk kang...sekalian ngedit cssnya yahh...hehehe

    sering bingung nih...

    ReplyDelete
  17. wah rupanya mas subagya jadi juga nih keingannya membuat template... selamat ya mas dan yang lebih penting tutorialnya sangat membantu sekali untuk pengenalan

    ReplyDelete
  18. cihui akhirnya suhu bikin tutor soal template, makasih2 :)lanjut terus suhu

    ReplyDelete
  19. yang keduanya cepat dirilis ya /baca, penasaran nie /hore , sukses bro /koprol

    ReplyDelete
  20. mantep suhu.. lanjut terus pastinya bakalan menarik neh..

    simple dan mudah di cernar .. nice artikel suhu /lari

    ReplyDelete
  21. sama nie bro..mo belajar ulang nie sama ente yah..wekekek../hehe

    ayo lanjut bro../hore

    ReplyDelete
  22. wah udah ktemu nih yg jago bikin template.. untuk mengasah kemampuan, blog saya boleh jd kelinci percobaannya mas... hehehe..

    ReplyDelete
  23. wah2 bagus nih artikel hehe,,, dulu mo bikin tak jadi2 molo nih tutor hehe,,akhirnya da yang menuliskannya hehe,,

    ReplyDelete
  24. wah lagi puyeng... ntar aja nyobainnya...

    ReplyDelete
  25. siap pak aku bwelajar sekarang...., tapi enakan kalo di buatin deh...hehehehheh jadi biar gak puyeng..hihihihih

    ReplyDelete
  26. terimakasih tutorial nya..

    lanjut kebagian kedua.!

    ReplyDelete
  27. wah ide bagus kang

    ReplyDelete
  28. Mantap

    GW PINGIN BANGET CIPTA TEMPLATE SENDIRI

    ReplyDelete
  29. saya awam banget tp penasaran ingin mencoba bikin sendiri..info ini semoga bikin saya nambah ilmu, makasih oom

    ReplyDelete
  30. Hooooreeeeee..rei...rei..naldy,.muantep neh muter-muter nyari tempat nuntut ilmu kanuragan akhrnya nantol disini..lanjuut...

    ReplyDelete
  31. sy juga muter2 cari tutorial ngatur kolum di blogger..... akirnya ketemu. mau coba dulu. makasih bang

    ReplyDelete
  32. TX BADAG hehe
    sori baru mampir ke blog u

    ReplyDelete
  33. Mantab tutorialnya bos... cuma kurang detil gw sebagai pemula gak mudeng :(

    ReplyDelete
  34. Makasih Mas, Saya juga lagi kepengen ngerti tentang template blog ini, belajar2 belum bisa juga
    Lam Kenal

    ReplyDelete
  35. Kak, aku baru beberapa minggu ini membuat blog. Terimakasih buat tutorialnya yah?! Sangat membantu cepi! kalau ada waktu, mampir ke blog saya yah. Thx. http://kacamatacepi.blogspot.com/

    ReplyDelete
  36. setuju sob mengajarkan anak yg baik itu adalah sesuatu yang mulia aku dukung

    ReplyDelete
  37. la salah komen daku...maaf sob kok bisa ya...maaf ya..lagi g konsen ni

    ReplyDelete
  38. @netmild : hehehehheh gapapa mas, salah itu dah bagian dari hidup kita asal jgn banyak salah ya..

    ReplyDelete
  39. dalam membuat template blogspot sendiri memang perlu sidikit keahlian CSS dan HTML

    ReplyDelete
  40. akhirnya menemukan caranya membuat template sendiri...
    thanks buat tipsnya :)

    ReplyDelete
  41. Bang, bisa bikin template kayak situs forum gak?kayak template kaskus gitu?

    ReplyDelete
  42. @ komunitas : kalau layoutnya sih bisa kang, kayanya tu forum bisa paka phBB

    ReplyDelete
  43. good good good...
    dah lama neh.. aku pengen ganti template...

    ReplyDelete
  44. ijin bukmark ya ka :)

    lagi belajar ngumpulin template blogger yang SEO ready

    ReplyDelete
  45. jUJUR SEJUJUR jujurnya....

    selama ini saya selalu gak pernah puasa memilih template blogger ke segala situs...

    banyak pilihan tapi gak sesuai hati saya..selalu aja ada yang kurang...
    mudah mudahan postingan mas dalam tema ini bakalan menjadi solusi buat saya.

    salam sejahtera INDONESIA....

    ReplyDelete
  46. akhirnya ketemu juga org yg baik, bagi2 ilmunya .makasih kang mochal.

    ReplyDelete
  47. sangat bermanfaat kawan.. udah lama ane pengen buat template sendiri tapi belum menemukan penjelasan yg mudah di mengerti.. thanks mas ;-)

    ReplyDelete
  48. dah lama buka blog tp belum belajar apa2 pun ... yang saya tau cuma buka blog dan mula menaip... akhirnya saya ingin belajar lebih lagi kerana semakin lama semakin sayang dengan blog peribadi saya ni... semoga dengan tunjuk ajar ini saya lebih maju setapak kehadapan ....
    tq

    ReplyDelete
  49. senang rasanya dapat ilmu bermutu. makasih ya ilmunya

    ReplyDelete
  50. waah...saya lagi belajr dengan artisteer nh mas

    ReplyDelete
  51. ini sangat bermanfaat buat saya

    ReplyDelete