Desain Template Blogger: Tutorial 8
<< Tutorial 7: Pengaturan Ukuran Template
>> Tutorial 9: Penjelasan lebih lanjut tentang Kode Body
Kembali ke Daftar Isi
Dalam tutorial ini saya akan menjelaskan struktur dasar dari kode template di bagian Body sehingga nantinya dapat memahami bagaimana bekerjanya seluruh kode tersebut. Kode dilokasikan bagian ke-3 seperti dijelaskan dalam Struktur Kode Template di Blogger. Body adalah bagian utama dari kode template di Blogger, kode template dibagian inilah yang akan ditampilkan dalam blog. Kode yang berfungsi untuk mengatur bagaimana sesuatu ditampilkan dalam blog adalah kode CSS.
Bagian Body ditunjukkan pada bagian 3 dari gambar dibawah:
Tampil di bawah ini kode Body disalin persis dari halaman Edit HTML Blogger tanpa mencentang 'Expand Widget Button'. Saya tidak ingin memasukkan kode lengkap dengan memeriksa 'Expand Widget Button' untuk 2 alasan. Pertama, itu tidak perlu dilakukan. Anda mungkin benar-benar tidak tahu apa yang terjadi dalam kode lengkap untuk dapat merancang sebuah template Blogger tersebut bekerja. Itu semua dilakukan 'secara otomatis' oleh Blogger, yang merupakan sebuah keindahan dalam menggunakan template Blogger baru. Kedua, dengan melihat versi sederhana dari kode, Anda akan dapat memahami lebih mudah bagaimana semua kontainer dalam template diletakkan.
<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 ketinggian 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>
Abaikan kode yang berwarna abu-abu. Secara garis besar kode didalam body, bisa dibagi dalam 4 bagian:
- Header (merah)
- Main (hijau)
- Sidebar (merah)
- Footer (coklat)
Bagian yang besar terdapat 3 wrapper, yaitu header-wrapper, content-wrapper, dan footer-wrapper. Posisi dari 3 bagian tersebut secara vertikal adalah header-wrapper ada diatas dan footer-wrapper ada dibawah. Untuk memahaminya sangat sederhana, karena kode header-wrapper ditulis pertama, kemudian diikuti oleh content-wrapper, dan terakhir adalah footer-wrapper. 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 ini 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.
<div id='banner-wrapper'> <b:section class='banner' id='banner' preferred='yes'> </b:section> </div>
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.
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 biru). Lebih lanjut nanti akan dibahas pada Tutorial 10 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.
___________________
Sumber: Our Blogger Templates
6 Juni 2012 pukul 21.21
mlm gan...
ane mo tanya gan, dalam template ane ko kode <body> gk ad ya, apa ad yg slh dlm template ane?
10 Juni 2012 pukul 12.43
sudah masuk ke template > edit HTML ?
coba tekan ctrl-F, lalu tuliskan tag body dan tekan search