Beranda / Tutorial

Desain Template Blogger: Penjelasan lebih lanjut tentang Kode Body

Posting Komentar

Desain Template Blogger: Penjelasan lebih lanjut tentang Kode Body

Diperbarui 10 Maret, 2019 Penulis: Philip Faster

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

  • Tutorial

« Terbaru

Terlama »

Tidak ada komentar untuk "Desain Template Blogger: Penjelasan lebih lanjut tentang Kode Body"

Posting Komentar