Hal ini mungkin karena keterbatasan tutorial ataupun dokumentasi untuk membuat template semacam itu. Nah, Lewat posting ini saya akan memberikan tutorial step by step cara membuat template blogger supaya support Blogger Template Designer sehingga anda bisa dengan mudah mengubah font, warna teks, latar belakang/background, dan lebar blog anda.
Saya rasa akan mudah bagi anda untuk mempelajarinya apabila anda sudah terbiasa membuat template. Oke, Mari kita mulai!
Di antara tag html <head> dalam template Anda, Anda harus memiliki sepasang tag <b: skin> </ b: skin>. Variabel-variabel akan didefinisan dalam tag ini. Jika tidak, maka tidak akan berhasil. Lihatlah contoh berikut ini :
<head>
...
...
...
<b:skin><![CDATA[
/* Variable Definitions
====================
<Variable name="link.color" description="Link Color" type="color" default="#09c" value="#a098cc"/>
*/
a {
color: $(link.color);
text-decoration: none;
}
]]></b:skin>
</head>
Catatan: <b: skin> </ b:
skin> <! - -> Tags akan dikonversi menjadi tag
<style></ style>, dan tag <! [CDATA [ ]]> akan
dikonversi menjadi <!-- --> saat blog tersebut dimuat. Tag <!
[CDATA [ ]]> harus berada di awal dan di akhir tag <b:
skin></b: skin> seperti dicontohkan diatas.Definisi Variabel tertutup dengan tag CSS komentar, / * dan * /, sehingga mereka akan dilihat sebagai komentar untuk browser dan hanya dapat digunakan oleh Blogger internal.
Mendefinisikan Variabel
Sebelum masuk pada bagian bagaimana menggunakan variabel dalam tag <b:skin></b:skin>, saya akan mengupas dahulu bagaimana mendefinisikan sebuah variabel agar bisa dipakai. Lihatlah kode berikut ini :<Group description="Gadget Title" selector="h2"> <Variable name="gadget.title.font" description="Font" type="font" default="normal normal 1.2em Cambria"/> <Variable name="gadget.title.color" description="Color" type="color" default="#666"/> </Group>Tabel dibawah ini akan membantu anda memahami atribut-atribut pada tag diatas:
Atribut pada tag
<Group>:| Atribut | Nilai | Deskripsi |
|---|---|---|
| description | text | Nama dibawah tab "Advanced" pada Blogger Template Designer. |
| selector | selector css | class/id/tag html yang ingin bisa diedit pada template. Pada saat kustomisasi template, elemen dengan selector ini akan ditandai dengan garis titik-titik besar warna merah. |
<Variable/>:| Attribute | Value | Description |
|---|---|---|
| name | huruf dan/atau angka | Nama variabel yang akan digunakan pada style css di template. Harus unik. |
| description | text | Nama dari warna huruf atau tab pada blogger template designer. Jika tag <variable> tidak berada diantara tag <group>, Maka ini akan menjadi nama di bawah tab "Advanced" tadi. |
| type | font color custom_string | Jenis untuk nilai variable yang akan diedit. |
| default | font_shorthand_property HEX_color_code | Nilai default jika pilihan/setting pada variable tidak dipilih. |
| value | font_shorthand_property HEX_color_code | Nilai variabel jika sudah disetting ulang. |
Kode Lagi... (Sabar :p)
<Group description="Gadget Title" selector="h2"> <Variable name="gadget.title.font" description="Font" type="font" default="normal normal 1.2em Cambria"/> <Variable name="gadget.title.color" description="Color" type="color" default="#666"/> </Group>Anda bisa lihat sendiri bahwa tag <group> digunakan untuk mengelompokkan beberapa opsi yang telah didefinisikan oleh variable. Gambar dibawah ini adalah hasil dari kode diatas :
Keterangan :
Tab "Blog Title" merupakan tab hasil dari adanya tag <group>, sedangkan opsi "Fonts" dan "Title Color" dihasilkan oleh tag <variable>
Jika anda membaca table yang pertama di atas, anda sudah tahu bahwa selector akan ditandai saat anda melakukan kustomisasi di Blogger Template Designer. Selector itu harus benar-benar spesifik agar tidak memengaruhi elemen lain. Sebagai contoh, selector yang digunakan pada group untuk mengedit "blog title" adalah tag "h2", sedangkan tag h2 juga dipakai untuk widget title. Sehingga, saat ingin mengedit "Blog Title", widget title juga akan diedit.
Karena itulah, selektor yang kita gunakan harus spesifik. gunakan Class pada tag html sebagai selector, jangan langsung pada nama tagnya. Misalnya seperti dibawah ini :
<Group description="Gadget Title" selector=".post h2.title">
Menggunakan Variabel
Setelah membuah sebuah variabel, anda bisa menggunakannya dalam kode css biasa yang ada di blog. Perhatikan kode berikut ini :<Group description="Gadget Titles" selector=".post h2.title"> <Variable name="gadget.title.color" description="Text Color" type="color" default="#aaa"/> <Variable name="gadget.title.font" description="Font" type="font" default="/> </Group>Pada kode diatas, saya tidak mendeskripsikan "value"-nya. Hal ini karena "value" akan secara otomatis dihasilkan dari nilai default, dan itulah yang akan kita pakai.
Mengganti Font & Warna
Biasanya, kita mengganti font atau warna langsung menggunakan css seperti dibawah ini (manual) :.post h2.title {
color: #0b5394;
font: bold 1.2em Cambria;
}
Jika template kita akan digunakan orang lain, kita harus sadar
bahwa tidak semua orang mengerti kode css. Sehingga mereka akan
kesulitan jika ingin mengubah style font seperti diatas. Karena itulah,
kita akan menggunakan Blogger Template Designer untuk mengeditnya. Kode
diatas biar diubah menjadi seperti dibawah :.post h2.title {
color: $(gadget.title.color);
font: $(gadget.title.font);
}
Kode diatas akan menggunakan nilai dari variable
$(gadget.title.font) yang telah kita buat dengan kode variable
sebelumnya. Itulah gunaya variable. Penggunaan variable pada kode css
harus berformat $(name dari variable yang digunakan). Bahkan nilai suatu variable juga bisa kita gunakan sebagai nilai dari variable lain. Misalnya sebagai berikut :<Variable name="gadget.title.color" description="Text Color" type="color" default="$(name dari variable lain)"/>
Menyesuaikan Lebar Blog dan Sidebar
Kita harus menambahkan tag <b:template-skin> di antara tag <head> pada template kita, dan sebaiknya dibawah tag </b:skin>. Seperti inilah kodenya :
<b:template-skin>
<b:variable default='960px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
<![CDATA[
.selector-page-wrapper {
width: $(content.width);
}
#selector-sidebar-right {
width: $(main.column.right.width);
}
#selector-sidebar-left {
width: $(main.column.left.width);
}
]]>
</b:template-skin>
Beres. Itu cuma dasar-dasarnya. Silahkan kembangkan sendiri yaaa.Catatan
Anda harus menggunakan tanda double quote " " pada saat menentukan nilai atribut pada tag <variable>. Karena jika menggunakan tanda single quote ' ' akan error.Selamat bereksperimen dan berkoding ria :D. Semoga Bermanfaat! jangan lupa share dan komentari yaaah.
