Tutorial 7 : Kode Template Bagian Body
Seri tutorial blog ini kita lanjutkan ke Kode Template Bagian Body setelah sebelumnya membahas tentang Cara Mengatur Ukuran Template . Seperti dijelaskan sebelumnya bahwa Body merupakan bagian utama dari Template Blogger, kode bagian inilah yang akan ditampilkan dalam blog. dan kode yang mengatur tampilan di blog itu adalah kode css
Secara sederhana Kode Bagian Body di Blogspot kurang lebihnya adalah seperti ini.
Kita abaikan yg warna abu=abu sehingga tampak secara garis besar kode didalam body, bisa dibagi dalam 4 bagian:<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='Testpage Two (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>
<!--Spasi untuk tampilan agar sidebar dan main punya tinggi yang sama-->
<div class='clear'> </div> </div> <!-- akhir content-wrapper –>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | Bordr' type='Text'/>
</b:section>
</div>
</div></div> <!-- akhir outer-wrapper –>
</body>
Perhatikan kode diatas, bahwa semua kode diantara tag body . Kemudian diikuti tag outer-wrapper dan selanjutnya adalah tag wrap2. Menggunakan wrapper atau pembungkus akan lebih mudah untuk mengedit kode dan menambah elemen dalam suatu bagian. Dalam penjelasan ini, kita hanya akan merujuk pada pembungkus yang paling besar yaitu outer-wrapper dan tidak membahas semua wrapper, diharapkan dengan memahami salah satu saja, yang lainpun dapat dipahami juga.
Bagian yang besar terdapat 3 wrapper, yaitu header-wrapper, content-wrapper, dan footer-wrapper dengan posisi berurutan dari atas kebawah. Pada tahap ini untuk mengatur tata letaknya, kita tidak perlu tahu apa yang ada didalam content-wrapper - bagian ini nantinya akan berlawanan jika mengatur tata letak dibagian dalam dari content-wrapper dimana didalamnya terdapat main-wrapper dan sidebar-wrapper. Dibagian tersebut agak lebih pusing untuk memahami.
Karena outer-wrapper adalah wrapper yang paling besar, maka kita harus memastikan bahwa lebar dari wrapper yang ada didalamnya tidak boleh lebih dari lebar yang ada di outer-wrapper.
Menambahkan wrapper atau bagian baru diantara salah satu wrapper (pembungkus) itu sangat mudah. Hanya tinggal paste contoh kode dibawah dan ganti dengan nama yang baru, dalam contoh kode dibawah namanya adalah banner-wrapper. Perintah preferred = 'yes ' akan membuat sebuah tombol 'Add Page Element' sehingga nantinya memungkinkan untuk membuat widget baru.
Menambahkan wrapper hanya menciptakan bagian atau blok baru dalam blog kita. Untuk menyesuaikan tampilannya dan di mana bagian tersebut terletak di blog, kita PERLU sedikit memodifikasi kode CSS. <div id='banner-wrapper'>
<b:section class='banner' id='banner' preferred='yes'>
</b:section>
</div>
Didalam content-wrapper, terdapat main-wrapper dan sidebar-wrapper. Untuk membuat 2 wrapper yang letaknya bersampingan seperti yang pada umumnya terlihat di blog, kita harus mengatur lebar sidebar-wrapper tersebut sama dengan atau kurang dari content-wrapper. Ditambah, kita harus menambah kode tertentu di CSS agar kedua wrapper tersebut posisinya bersebelahan. Jika tidak diatur kedua wrapper tersebut akan mempunyai posisi vertikal diatas dan bawahnya. Biasanya, dengan menggunakan perintah: 'float:left'. Lihat beberapa contoh template untuk memeriksa lebih lanjut tentang ini. Jika ingin menambahkan sidebar (jadi sidebar lebih dari 1), berarti template 3-kolom, hanya perlu menambahkan kode sidebar-wrapper (warna hijau). Lebih lanjut nanti akan dibahas pada tutorial berikutnya untuk mengetahui cara menambahkan atau mengubah sidebar.
Setelah memahami kode yang ada didalam body, saya kira mudah untuk mengatur ulang atau menambah wrapper baru dengan memodifikasi kode yang ada didalam Body. Tapi kemudian, untuk mengatur letaknya kita harus memodifikasi kode CSS.
Sampai disini topik bahasan tentang : Kode Template Bagian Body ,
Sebelumnya : Tutorial 6 : Mengatur Ukuran Template . Selanjutnya Tutorial 8 : Penjelasan lebih lanjut tentang Kode Template Bagian Body.
Source : gembong.web.id/
- Thanks telah mampir, yo kita saling vote dan comment..
- Bila berkenan tolong share/bagikan dengan tombol share dibawah.
- Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan
Halah update nya lama banget nih
BalasHapus