Desain Template Blogger: Tutorial 9
<< Tutorial 8: Bagian Body pada Kode Template Blogger
>> Tutorial 10: Membuat Template 3-Kolom atau Lebih...
Kembali ke Daftar Isi
Dalam tutorial ini saya akan menjelaskan lebih lanjut tentang beberapa perintah khusus yang biasanya ada di bagian Body. Lihat contoh kode berikut ini:
<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='Blog Title' 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 class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | JournalBlue' type='Text'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
Secara default, setiap blok harus dibungkus dengan tag div dan tag b:section. Setiap tag div dan b:section dinamai (identifikasi) dengan menggunakan perintah id. Perintah tersebut juga dapat diklasifikasikan lebih lanjut kedalam 'class' menggunakan perintah class. Identifikasi dan klasifikasi ini sangat berguna ketika mengatur model/propertinya dengan kode CSS. Didalam kode CSS, perintah id ditunjukkan dengan menggunakan simbol # symbol dan perintah class ditunjukkan dengan menggunakan simbol . Sebagai contoh, dikode CSS terdapat #main-wrapper {...} atau .sidebar {...} yang mana kode ini digunakan untuk mengatur model di main-wrapper dan sidebar. Kita dapat pelajari lebih lanjut tentang identifikasi dan klasifikasi di w3schools.com
Semua blok yang dibungkus menggunakan tag b:section adalah widgets (juga bisa dinamakan Page Element). Untuk contoh, didalam Header ada widget dengan nama Header1. Perhatikan, bahwa widget ini berisi kode maxwidgets='1' showaddelement='no'. Kode maxwidgets='1' berarti bahwa jumlah widget maksimum di header-wrapper adalah 1. Berarti kita tidak dapat menambah widget dengan Page Element dan menempatkan widget tersebut dibawah atau diatas Header. Kode showaddelement='no' berarti bahwa tombol Add a Page Element tidak ditampilkan dibagian Header.
Didalam main-wrapper, kita hanya bisa memberi kode showaddelement='no' yang mana berarti bahwa tombol Add a Page Element tidak boleh ditambahkan disini, tetapi kita dapat meletakkan widget diatas atau dibawah Blog Posts didalam main-wrapper.
Di sidebar-wrapper, terdapat kode preferred='yes'. Perintah ini akan membuat tombol Add a Page Element agar kita dapat menambahkan widgets. Jumlah widgets yang dapat ditambahkan tidak ada batasnya. Selain itu kita juga dapat menarik atau menggeser widgets untuk diletakkan kedalam wrapper/pembungkus lain dalam jumlah yang tidak terbatas juga.
Di footer-wrapper, tidak ada kode perintah id. Ini berarti bahwa tidak ada tombol Add a Page Element akan tetapi kita dapat menarik dan meletakkan widget kedalam bagian Footer.
___________________
Sumber: Our Blogger Templates
2 September 2012 pukul 12.44
thanks belo