» » Belajar membuat template sendiri (4)

Belajar membuat template sendiri (4)

Memasuki bagian berikutnya dalam belajar membuat template sendiri, sebelumnya silahkan refresh kembali bagian 1, bagian 2, dan bagian 3. Jika sobat sudah menguasai bagian-bagian tersebut insya Allah sobat lebih terarah ke bagian berikutnya dalam membuat template sendiri, yang penting prinsip trial and error serta bisa karena biasa maksudnya adalah jika sobat terbiasa mengutak-atik kode HTML-an maka sobat akan lebih advance dalam membuat template sendiri.
Mau tahu kelanjutannya?


Sekarang saatnya membahas ke section 3 dimana saya sudah jelaskan di bagian 2, silahkan sobat baca kembali, karena butuh pemahaman di section 3 ini. Seperti yang saya sudah jelaskan di bagian 2 bahwa section 3 ini berisi informasi data-data blog sobat serta mengatur container yang di bentuk oleh section 2. Saya akan membagi beberapa kode di section 3 ini, tapi ada baiknya sobat lihat kode utuhnya (tanpa expandable widget):


<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks'
style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='subagya Test (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main'
showaddelement='no'>
<b:widget id='Blog1' locked='true'
title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'
preferred='yes'>
<b:widget id='Profile1' locked='false'
title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false'
title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false'
title='Labels' type='Label'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar
and main to be the same height-->
<div class='clear'>&#160;</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false'
title='Catatan kaki' type='Text'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>

Kode template blogger umumnya seperti ini, yang perlu sobat perhatikan adalah penempatan containernya, di mana kalau terlihat di code tersebut pembacaannya di mulai dari HEADER, MAIN, SIDEBAR, FOOTER . Container tersebut bisa sobat ubah-ubah posisinya tapi ingat tentunya tidak akan sesuai dengan prinsip SEO (yang saya baca-red) atau bakal berantakan tampilannya, kalau sobat merubah-rubah posisinya.

Nah sekarang saya bagi ke dalam beberapa bagian agar mudah di mengerti

# HEADER

<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Subagya Test (Header)' type='Header'/>
</b:section>
</div>

Kode ini berisi mengenai container header yang di bentuk di section 2 atau bagian CSS, saya akan coba urai kode tersebut agar sobat bisa paham.
<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Subagya Test (Header)' type='Header'/>
</b:section>
</div>

Tulisan yang tercetak tebal adalah container header yang membungkus (wrap) section header dan widgetnya. Seperti yang saya sudah jelaskan di bagian 3 bahwa id untuk di CSS adalah dengan tanda #(slash) dan class . (dot) dan di bentuk di section 2.
Kemudian saya urai lagi bagian header ini :


<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Subagya Test (Header)' type='Header'/>
</b:section>
</div>

Bagian yang tercetak tebal ini menjelaskan bahwa section header terdapat widget di dalamnya yaitu header1 dengan title Subagya Test . Bisa di lihat kodenya widgetnya seperti ini : <b:widget id='Header1' locked='true'
title='Subagya Test (Header)' type='Header'/>


# MAIN

<div id='main-wrapper'>
<b:section class='main' id='main'
showaddelement='no'>
<b:widget id='Blog1' locked='true'
title='Blog Posts' type='Blog'/>
</b:section>
</div>

- Pada prinsipnya sama dengan bagian header silahkan sobat pahami dengan seksama.

# SIDEBAR

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'
preferred='yes'>
<b:widget id='Profile1' locked='false'
title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false'
title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false'
title='Labels' type='Label'/>
</b:section>
</div>

- Prinsip pembacaannya sama dengan header dan main, hanya yang berbeda adalah bagian ini umumnya bisa Add Page Element pada tampilan Edit Layout, tetapi pada bagian Header dan Main bisa juga untuk menambahkan Add Page Elements hanya dengan mengganti showaddelement='no'> menjadi showaddelement='yes'>

# FOOTER

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false'
title='Catatan Kaki' type='Text'/>
</b:section>
</div>

- Tidak jauh berbeda dengan bagian-bagian lainnya pada pembacaan kode footer ini.

Saya harap sobat bisa paham dengan pejelasan dari seorang subagya ini wekekekkeke, karena pada dasarnya kita juga sama-sama dalam proses belajar, semoga bermanfaat dan happy blogging :p .
Posted by at
Labels:

28 comments:

  1. AnonymousOctober 23, 2008 at 12:23 AM

    Aciiiik pertamaaaax... gile lo bro mantab amat tutor lu...

    ReplyDelete
  2. sawa (tukang sapu radio)October 23, 2008 at 12:24 AM

    Wah mangkin canggih aza si bos ini.. Nggak percuma nich submit RSS-nya

    ReplyDelete
  3. SubagyaOctober 23, 2008 at 12:34 AM

    @ abangaffan > gile lo bro ini aja ampe puyeng2 bikin postingannya
    @ sawa > wekekekkeke selamat yaks bro dagh gabung di subagya.blogspot.com

    ReplyDelete
  4. AnonymousOctober 23, 2008 at 2:55 AM

    kalau pakai wordpress nggak bisa seenaknya ngotak-atik html kayak blogspot :(

    ReplyDelete
  5. AnonymousOctober 23, 2008 at 4:24 AM

    wewwewe,, keren,, tp saya ndak mudeng.. Saya bisanya cuman translatein aja, hag hag hag

    ReplyDelete
  6. anita muiOctober 23, 2008 at 5:00 AM

    weeww..Komplit banget teorinya...JEMPOL 4 kuacungkan buatmu...!! SATRIA TEMPLATE

    ReplyDelete
  7. AnonymousOctober 23, 2008 at 5:08 AM

    mau dong !!!

    ReplyDelete
  8. adeskaOctober 23, 2008 at 5:26 AM

    Manteps kang Mochal.
    Bisa belajar mengenai "kepribadian" template blogspot niech.
    thanks utk ilmunya. :)

    ReplyDelete
  9. AnangOctober 23, 2008 at 6:14 AM

    idem ama sawa mas!

    keren dan sistematis, informatif. sukses!

    ReplyDelete
  10. Kristina Dian SafitryOctober 23, 2008 at 6:33 AM

    balajar ngubah tampilan blog lagi ah. gw semakin gila belajar html nih. belajar untuk diri sendiri tak ada salahnya..

    ReplyDelete
  11. BontangersOctober 23, 2008 at 7:45 AM

    Tepuk tangan dulu,..ah..
    plok,..plok..plok..plok..

    ReplyDelete
  12. AnonymousOctober 23, 2008 at 8:47 AM

    kalo bikinin template bwat adek mau khan kak? hihihihihi,,, *kabuuuuuuuuuuuuur* ^_^

    ReplyDelete
  13. AnonymousOctober 23, 2008 at 9:25 AM

    widih... keren juga... gw juga baru buat template sendiri... ntr 2 mingguan baru diluncurka... he..he.. maklum.. jarang nyentuh blog2 lagi... masih pucing ilang email... he..he.. btw gud postingan euy.... siip dech...

    ReplyDelete
  14. AnonymousOctober 23, 2008 at 12:40 PM

    Emang ini yang ditunggu2 Om, Maju terus Om

    ReplyDelete
  15. BontangersOctober 23, 2008 at 1:27 PM

    "chal,..boleh kan aku tepuk tangan lagi??"
    plok,....plok...plok....plok....plok!
    Salute n Success!

    ReplyDelete
  16. Baka KelanaOctober 23, 2008 at 2:09 PM

    Keren Bos...jarang2 ada yang bagi ilmu seperti ini

    ReplyDelete
  17. AnonymousOctober 23, 2008 at 4:00 PM

    Bikin format komen ky gini yg bisa d next next gimana cara nya sih....

    ReplyDelete
  18. AnonymousOctober 23, 2008 at 5:19 PM

    mantap banget kang *standing ovation*
    pemula kaya ane masih bisa ngikutin dengan mudah,
    pokoknye ente te o pe lah *duduk lagi*

    ReplyDelete
  19. Sali MonelOctober 23, 2008 at 7:45 PM

    mantepp kang subagya... sweep... lanjutin deh...

    ReplyDelete
  20. AnonymousOctober 23, 2008 at 7:52 PM

    @ kasturi > sebenarnya saya juga lagi pahami, nanti saya post ko bro....

    ReplyDelete
  21. AnonymousOctober 23, 2008 at 8:16 PM

    cihuiiii.. mantep-mantep... apalagi template dari ramani yg di modif ..huhuhu..jadi ngiri

    ReplyDelete
  22. SubagyaOctober 23, 2008 at 8:36 PM

    @ jaloee > yups ramani memang mantab kang wekekekekek

    ReplyDelete
  23. AnonymousOctober 23, 2008 at 10:26 PM

    wah makin mantab aja kang...selamat....aku nih masih nyubie jadi gag bisa buat tempaltenya....hehehehe

    kang kapan nih e-booknya di keluarin biar aku donlot aja biar bacanya lebih fresh....maaf aku baru pulang gawe nih

    ReplyDelete
  24. SubagyaOctober 23, 2008 at 10:40 PM

    @ harry > saya pertimbangkan sih kang....

    ReplyDelete
  25. Andi KurniawanOctober 23, 2008 at 11:56 PM

    WAH, saya mau blajar mas

    ReplyDelete
  26. AnonymousOctober 25, 2008 at 6:37 PM

    chal..nyang ini tak save juga yah..hehehe..crusial nie..hehehe..

    capa tau pake otak atik templit nti..

    okeh chal..thx pelajarannya nie..wekekek..membantu ane banget :)

    moga cukces ama templit nyang laennya juga

    ditunggu gratisannya..xixixxi

    ReplyDelete
  27. sinjay schoolFebruary 25, 2010 at 12:36 AM

    thanks, smoga bisa

    ReplyDelete
  28. Hidup sederhanaJuly 26, 2010 at 3:58 PM

    sekarang mau jd pengunjung setia kang mochal dl, enak di cerna nih tutornya

    ReplyDelete

Subscribe to: Post Comments (Atom)