Jumat, 11 Februari 2011

Tag <b:section> and <b:skin> Template Blogspot

Kayaknya daleman kode-kode blogger blogspot sudah hampir Beben bagi semua. Sebelumnya masih ingat dengan Page Layout Default Blogger dan ini Post Includable Part II. Tentunya postingan ini sudah membuka lebih dalam lagi pengetahuan sobat dalam mendalami kode blogger Struktur Template Blogger Blogspot :)
Bagi yang masih memakai klasik template dari blogspot, Beben si bloglang anu ganteng kalem tea juga sudah membuat tabel alakadarnya di Tabel Kode Template Klasik dan Modern. Mau apalagi hayo keperluan untuk membuat template blogger dengan design sendiri :-/ :D Untuk lebih melengkapi keterangan serta tambahan pengetahuan mengenai coded template blogger blogspot ini, Beben akan bagi lagi dari sobat kita yg sudah menciptakan template-template keren b-) :-bd

Kalau sobat jeli dalam membaca artikel² Beben, sobat ini sudah pernah hadir di prodigy of head ini loh Bloggerz Bible ;) Mari kita kuak keterangan versi @bloggerzbible dengan istilah Microtuts Bit and Microtuts Backbone.
Keterangan code sobat ini menitikberatkan pada tag <b:skin> dan <b:section> template.

Template blogger blogspot seperti halaman HTML dengan gaya yang sama berulang lagi dan lagi setiap kali membuat posting kecuali kita menerapkan beberapa kondisi kode didalam template kita.

Template blogspot agak sedikit berbeda. Sebuah template blogger menggunakan tag sendiri didefinisikan seperti <b:skin>, <b:if> dll bersama dengan tag HTML seperti <blink>, <div> dll. Tag blogger didefinisikan dalam sebuah file yang mengakses pada dalaman blog saja. File tersebut hanya bertindak sebagai library untuk semua tag blogger. Jika kita melepaskan file tersebut, kemudian tag blogger seperti <b:skin> akan menjadi teks biasa, Tag tidak akan memiliki definisi (fungsi).
Mengenai hal ini lebih jauh, sobat bisa kunjungi blogger help di Layouts Data Tags!

Mengenai tag <b:skin>

<b:skin> selalu ditempatkan didalam tag <head> </head> dan diberi tag penutup </b:skin><head>
<b:skin>

<!-- CSS Content -->

</b:skin>
</head>
Tag <b:skin> memiliki properti yang sama seperti <style> pada dalaman halaman HTML. Setiap kali tag kode ini dibaca oleh browser lalu saat memuat tag <b:skin> akan digantikan dengan <style id='page-skin-1' type='text/css'> dan tag penutup </b:skin> digantikan dengan </style>. Jadi tentang memuat lengkap dari setiap halaman blogspot kode di atas akan tampak sbb...<head>
<style id='page-skin-1' type='text/css'>

<!-- CSS Content -->

</style>
</head>
Kalau mau lihat lengkap, klik kanan pada mouse pilih View Page Source (mozilla browse)

Pada template blogspot tag pembuka <b:skin> diikuti oleh <![CDATA[ dan tag penutup </b:skin> diikuti dengan ]]> Kedua kode tersebut mencegah segala jenis kesalahan terjadi saat kita mencoba untuk menyimpan template (biasanya saat pengeditan dilakukan sob) In image

microtuts

Mengenai Tag <b:section>

Setelah mengetahui beberapa fungsi fari tag <b:skin> kita lanjut yuk sob.
<b:section> adalah tag tata letak yang menentukan dari tata letak template blog. Tag ini membantu dalam menciptakan kolom didalam template. Misalnya dengan tag ini kita dapat membuat template dengan satu atau lebih bagian sidebar, footer, kolom dll. Tag <b:section> ditempatkan di dalam body dari template blogger yang berarti selalu ditempatkan di dalam tag <body>. Tag ini merupakan bagian dari header blogger template misalnya navbar, sidebar dll.

Setiap bagian adalah unique yang berarti pada bagian memiliki fungsi sendiri dan diatur dengan attribute id. Atribut id ini tidak bisa diulang pemakaiannya didalam template. Berbeda dengan atribut class, yg bisa diulang-ulang ;)

Contoh kode <b:section> pada Header

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'/>
</b:section>
Setiap tag <b:section> terdiri dari tag <b:widget> seperti ditunjukkan pada contoh diatas. Setiap kali kita mencentang kotak maka tag <b:widget> ini berkembang dengan sendirinya, dan kita bisa melihat kode dalaman <b:widget>

<b:section> attributes

Pada contoh diatas kita lihat bersama tag <b:section> ada teks tertentu seperti class, id, maxwidgets, showaddelement dan atribut lainnya. Atribut ini menambahkan fitur khusus untuk tag <b:section>. Sebagai contoh jika showaddelement sama dengan no maka "Add a Gadget" pilihan tidak akan muncul dalam halaman "Page Elements" dan jika yes "Add a Gadget" pilihan akan muncul.

Susunan Attribute yang akan muncul pada bagian tag <b:section> akan terlihat seperti berikut...

  • Id - (Always Required)
  • Terdiri dari unique id yg terdiri dari huruf dan angka saja (HTML12, List34, dll)
  • Class - (Optional Attribute)
  • Nama umum yang sering digunakan didalam bagian navbar, header, main, sidebar dan footer. Dapat ditambahkan nama apapun sesuai kebutuhan.
  • Maxwidgets - (Optional Attribute)
  • Bagian jumlah maksimum dari widget. Jika kita tidak menentukan batas, maka dapat menambahkan sebanyak yang diinginkan.
  • Showaddelement - (Optional Attribute)
  • Dapat 'yes' atau 'no' dengan 'yes' sebagai default value. Ini menentukan apakah tab Page Elements akan menunjukkan Add a Gadget link atau tidak.
add a gadget

Bekerja dengan tag <b:section>

Menggunakan atribut diatas bagian apapun dapat dibuat untuk melakukan fungsi yang berbeda dalam "Page Elements" tab. Kita dapat menambahkan tag <b:section> bersama dengan atributnya untuk membuat bagian sidebar satu atau dua di sebelah kiri dan yang lainnya di sebelah kanan. Contoh...
<div id='sidebar-wrapper-left'>
<b:section class='sidebar' id='sidebar-left' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<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-right'>
<b:section class='sidebar' id='sidebar-right' preferred='yes'>
<b:widget id='Profile2' locked='false' title='About Me' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>
Pada contoh di atas telah ditempatkan bagian utama yang mana area posting di antara dua sidebars. Kedua sidebars memiliki id yang berbeda, tapi memiliki class yg sama. Kode CSS yg dipakai yaitu
#content-wrapper {
width: 900px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-top: 0;
}
#main-wrapper {
margin:0 7px;
width: 424px;
float: left;
background-color: #FFFFFF;
display: inline;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper-left {
margin-right: 11px;
width: 220px;
float: left;
background-color: #FFFFFF;
display: inline;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper-right{
display: inline;
float: left;
margin-left: 11px;
width: 220px;
}
Hasil layout dari 2 kode diatas jika digabungkan menjadi

two sidebar blogger
Inilah penjelasan singkat mengenai tag <b:section> Mungkin dengan adanya ini semakin terbelalaklah pengetahuan kita mengenai kode-kode template blogspot yak sob :) Sehingga dengan begitu kita akan dapat membuat template untuk memberitahukan kepada khalayak bahwa blog kita sedang dalam perbaikan (maintenace) ;))

underconstruct

undermaintenance
Sampai jumpa lagi dengan si Beben bloglang nu ganteng kelam tea \m/

Resource by: Bloggerz Bible

Tidak ada komentar:

Posting Komentar