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 .

28 comments:

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

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

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

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

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

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

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

    ReplyDelete
  8. idem ama sawa mas!

    keren dan sistematis, informatif. sukses!

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

    ReplyDelete
  10. Tepuk tangan dulu,..ah..
    plok,..plok..plok..plok..

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

    ReplyDelete
  12. 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
  13. Emang ini yang ditunggu2 Om, Maju terus Om

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

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

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

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

    ReplyDelete
  18. mantepp kang subagya... sweep... lanjutin deh...

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

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

    ReplyDelete
  21. @ jaloee > yups ramani memang mantab kang wekekekekek

    ReplyDelete
  22. 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
  23. @ harry > saya pertimbangkan sih kang....

    ReplyDelete
  24. 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
  25. sekarang mau jd pengunjung setia kang mochal dl, enak di cerna nih tutornya

    ReplyDelete