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.
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.
Daftar Isi Postingan
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. |
Atribut pada <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.download full movie Spider-Man: Homecoming 2017
Diterjemahkan dan diubahsesuaikan dari : http://bloggerillustrated.blogspot.com/2012/07/how-to-add-support-for-blogger-template-designer-in-custom-templates.html
Luthfi
Baru sekali baca terasa masih jlimet..hehe
Nanti akan saya coba lagi insyaallah..makasih infonya mas..
Syakir Rahman
Ini khusus yang sudah bisa bikin template gan hahaha
Mugianto
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
Syakir Rahman
Tataletak rapihinnya pakai selector css biasa.. tapi diawalnya pakai ‘body#layout’.. misal untuk tata letak sidebar bisa ditulis seperti ini :
body#layout .sidebar { width:300px;float:left }
Ade Mulyawan
Makasih gan. Baru baca sekali ane langsung paham. Langsung ane praktekin deh.
Herbi
ribet bener… =_= mata linu liatinnya.
Kelvin Yuli Andrian
Thx. gan. mantap !!!
Jarwo
Waduh, makasih sebanyak banyaknya nih, ini yang saya cari-cari di google, tapi gak dapet-dapet. Terima kasih banyak ya! Pasti saya terapkan di template saya.
Miran
gan kode .selector-page-wrapper {
dari css atau html yang ada di template kita, atau memang sudah menjadi kode baku.
terimakasih..
syakirurahman
Dari css atau htmlnya.. bisa disesuaikan sendiri
mbah blogger
Sangat membantu. Terima kasih! Saya nyari2 cara atur width, hehe