Cara Membuat Template Blogger Support Blogger Template Designer

Seperti yang telah kita ketahui, bahwa Blogger Template Designer membuat kustomisasi template menjadi lebih mudah. Kita bisa mengubah warna teks, background dan header dengan mudah tanpa mengotak-ngatik kode html/css-nya. Namun, itu hanya jika kita menggunakan default template di blogger atau template blogger yang support Blogger Template Designer, yang sayangnya sangat jarang.

Blogger Template Designer

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>:

AtributNilaiDeskripsi
descriptiontextNama dibawah tab “Advanced” pada Blogger Template Designer.
selectorselector cssclass/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.

Atribut pada <Variable/>:

AttributeValueDescription
namehuruf dan/atau angkaNama variabel yang akan digunakan pada style css di template. Harus unik.
descriptiontextNama 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.
typefont
color
custom_string
Jenis untuk nilai variable yang akan diedit.
defaultfont_shorthand_property
HEX_color_code
Nilai default jika pilihan/setting pada variable tidak dipilih.
valuefont_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 :

contoh pengelompokkan variable pada grup

 

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.

Selektor harus spesifik

 

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

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.

Diterjemahkan dan diubahsesuaikan dari : http://bloggerillustrated.blogspot.com/2012/07/how-to-add-support-for-blogger-template-designer-in-custom-templates.html

 

 

7 Comments

  1. Baru sekali baca terasa masih jlimet..hehe
    Nanti akan saya coba lagi insyaallah..makasih infonya mas..

  2. Akhirnya nemu juga yang ngasih tahu manfaat b:template-skin hehehe udah lebih dari sebulan baru nemu Blog ini.
    Oh ya gan ada artikel yang bahas cara merapikan tata letak gak?
    Soalnya saya buat template sendiri, tapi di tata letak ga tahu cara ngerapihinnya, kalo ada kasih tau linknya ya makasih gan

  3. Makasih gan. Baru baca sekali ane langsung paham. Langsung ane praktekin deh.

  4. ribet bener… =_= mata linu liatinnya.

  5. Thx. gan. mantap !!!

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *