Tutorial 8 : Kode CSS Template Bagian Body 2
Masih sekitar tutorial blog serial Struktur CSS Template Blogger yang sudah lama tidak saya update, Sebelum ini saya posting artikel tentang Kode Template Bagian Body silahkan kalau mau baca dulu agar nyambung dengan artikel ini sebagai lanjutannya yaitu Kode CSS Template Bagian Body 2 , begitu ceritanya….
Beberapa perintah khusus akan kita lihat dalam Kode CSS (Cascading Style Sheets) Template Bagian Body seperti sample di bawah 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>
Catatan dalam Kode CSS Bagian Body ini adalah :
- Setiap bagian atau kontainer harus dibungkus (to be wrapped) dengan tag div dan tag b:section , begitulah secara defaultnya.
- Kemudian setiap tag div dan b:section diidentifikasi dengan perintah id. lebih lanjut perintah tersebut diklasifikasikan kedalam 'class' menggunakan perintah class.
- Identifikasi dan klasifikasi ini akan memudahkan dalam mengatur kode css untuk properinya.
- Didalam kode CSS, perintah id ditandai dengan simbol #
- Symbol dan perintah class ditunjukkan dengan menggunakan simbol . (dot/titik)
- 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
Beberapa hal penting lainnya dalam Kode CSS Bgian Body diatas :
- Semua blok yang dibungkus menggunakan tag b:section adalah widgets atau gadget, juga dinamakan Page Element. Sebagai contoh, dalam 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. Kita tidak dapat menambah widget / gadget dengan Page Element pada Header seperti ini. - 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 berarti tombol Add 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'. Kode perintah ini berfungsi agar tombol Add a Page Element bisa diunakan untuk menambahkan widgets berapapun yang diinginkan. Selain itu dapat dipakai untuk memindahkan widget ke bagian/ wrapper lain dengan mendrag/menggesernya kelokasi lain. - Di footer-wrapper, tidak ada kode perintah id. Ini berarti tidak ada tombol Add Page Element, tetapi dapat meletakkan widget kedalam bagian Footer.
Ok sampai disini dulu Belajar Tutorial Blog dalam topik bahasan Kode CSS Template Bagian Body 2 . Semoga bermanfaat dan jika sobat ingin menerima setiap artike dari Blog Tutorial Dan Bisnis secara gratis, silkahkan klik Subscribe Disini yang ada dibawah postingan ini.
- Posting sebelumnya : Kode Template Bagian Body
- Posting selanjutnya : Cara Membuat Template Blogger 3 Kolom
- 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
Mampir n test comment
BalasHapuskunjungan sore gan
BalasHapusmantep mas artikelnya boleh juga tuh.,.,.,
BalasHapus