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). 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 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 ;) Susunan Attribute yang akan muncul pada bagian tag <b:section> akan terlihat seperti berikut... Resource by: Bloggerz Bible
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>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...
<b:skin>
<!-- CSS Content -->
</b:skin>
</head><head>Kalau mau lihat lengkap, klik kanan pada mouse pilih View Page Source (mozilla browse)
<style id='page-skin-1' type='text/css'>
<!-- CSS Content -->
</style>
</head>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.Contoh kode <b:section> pada Header
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>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:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'/>
</b:section><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.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...
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
<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>
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;
}
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) ;))
Loading... |
9 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...