GO Blog

Blogger telah menyediakan tool yang baik untuk menyesuaikan template yang disebut Template Designer Blogger. Menggunakan Blogger Template Designer Anda dapat mengubah gaya font, warna, lebar template, dan latar belakang template. Blogger Template Designer menyediakan cara mudah mengubah template dengan Anda masuk ke dalam Blogger Template Designer. Dalam posting ini saya akan berbagi sedikit trik bagaimana menggunakan Blogger Template Designer untuk mendesain template anda.

Interface dengan Blogger Template Designer dibuat dengan bantuan variabel. Variabel yang digunakan untuk menyimpan beberapa nilai seperti warna, kelompok font, ukuran font, URL gambar latar belakang dll. Nilai-nilai yang digunakan dalam CSS untuk menerapkan tampilan dan nuansa untuk template.

Variabel ini didefinisikan antara

<b:skin><![CDATA[ dan ]]></b:skin>

Cara Menentukan Variabel

Sintaks variabel mendefinisikan adalah

<Variable name="post.title.font" description="Font" type="font" default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 24px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>

Lihat lebih detail

name adalah nama variabel, yang merupakan nama yang unik, digunakan untuk mengakses variabel dalam CSS.
description digunakan untuk mengidentifikasi variabel ke Blogger Template Designer.
Menggunakan  type, Blogger Template Designer menentukan jenis interface menyediakan untuk menyesuaikan variabel. Anda dapat menggunakan font, warna atau string kustom.

Desainer template menyediakan tool kotak untuk mengubah nilai font.

untuk warna

default adalah nilai default yang diubah, ini digunakan untuk me-reset nilai variabel tersebut.
value adalah nilai saat ini.

Nilai untuk warna Format HEX_Color_Code layar dan huruf dalam format Font_Shorthand.
Sintaks untuk format Font_Shorthand,

Format Thand,

<font-style> <font-variant> <font-weight> <font-size> / <line-height> <fontfamily>

Dimana font-size dan font-family diperlukan, untuk yang lain digunakan nilai default mereka jika hilang.

Variabel pengelompokan

Pengelompokan variabel dengan desainer template juga membuat user friendly interface. Dengan mengelompokkan Anda dapat mengakses beberapa properti untuk elemen yang di satu tempat. Misalnya untuk judul posting Anda dapat memposting kelompok warna judul dan huruf judul posting bersama-sama. Contoh lain pengelompokan bersama warna link, mengunjungi link warna dan melayang-layang warna link di bawah link.

Sintaks untuk Group,

<Group description="Group Title" selector="h1"> 
.... 
<!--Variable disini--> 
.... 
</Group>

dimana,

description nama judul grup, digunakan untuk kategori variabel dalam perancang template blogger.
selector bagian yang memilih dari template blogger sedangkan kelompok ini dipilih untuk mengedit. Hal ini berguna, ketika seseorang mengedit template melalui desainer, itu menunjukkan kepada pengguna bagian mana dari template yang sedang diedit.

Contoh:

<Group description="Blog Title" selector=".header h1">      
     <Variable name="header.font" description="Font" type="font" default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 48px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>      
     <Variable name="header.text.color" description="Title Color" type="color" default="#3399bb"  value="#ffffff"/> 
</Group> 

Kode di atas adalah kelompok font dan warna untuk judul blog, memiliki deskripsi "Blog Title" dan pemilih adalah tag h1 dalam sundulan kelas. Jadi, ketika Anda memilih Blog Title untuk mengedit dalam desainer template lalu di mana tag h1 di bawah kelas header disorot. Jenis variabel menyediakan antarmuka khusus untuk mengedit nilai-nilai, di sini variabel header.font memiliki jenis font dengan deskripsi font dan variabel header.text.color memiliki jenis warna dengan deskripsi Warna Judul. Ketika Anda melihat ini dalam desainer template terlihat seperti gambar dibawaini,

Cara menggunakan dalam CSS

Secara umum, kita menggunakan css seperti ini.

.header h1{     
            font-family:Verdana, Geneva, sans-serif;     
            font-size:12px;     
            font-style:italic;     
            font-weight:bold;         
            color:#00C;    
} 

Jika Anda ingin menggunakan variabel dalam CSS, menggunakan variabel bukan nilai ditutup dalam $ (). Lihat kode berikut.

.header h1{     
             font:$(header.font);        
             color:$(header.text.color); 
} 

Pada tipe ini nilai untuk font dan warna diambil dari variabel.

<?xml ... ?> 
<html ....> 
<head> 
<b:skin> <![CDATA[ 
/* Variable Defination       
<Group description="Links" selector=".main-outer">     
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#c4005b"/>     
<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#909090"/>     
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#ff13b8"/> 
</Group> */ 
a:link {   
      text-decoration:none;   
      color: $(link.color); 
} 
a:visited {   
       text-decoration:none;   
       color: $(link.visited.color); 
} 
a:hover {   
       text-decoration:underline;   
       color: $(link.hover.color); 
} 
]]> </b:skin> 
</head> 
<body> 
.... 
</body> 
</html>

Anda juga dapat menggunakan salah satu nilai variabel untuk menentukan variabel lain sehingga mengubah satu nilai variabel akan mencerminkan efek pada semua template.

Lebar Blog dan Sidebar

Dalam template <b:skin> </ b: skin> digunakan untuk melampirkan CSS, sama seperti <b:template-skin> dan </ b: template-skin> digunakan untuk faktor panjang tertutup template berarti lebar template, sidebar.
Dalam hal ini, sintaks variabel yang sama tetapi jenis variabel adalah panjang.

<b:variable default='960px'  name='content.width' type='length' value='990px'/>     
<b:variable default='310px' name='main.column.right.width' type='length' value='340px'/>

Contoh:

<b:template-skin>   
<b:variable default='960px'  name='content.width' type='length' value='990px'/>   
<b:variable default='310px' name='main.column.right.width' type='length' value='340px'/>   
<![CDATA[ 
body {     
     min-width: $(content.width);     
}     
.main-inner .columns {           
     padding-right: $(main.column.right.width);     
}     
.main-inner .fauxcolumn-right-outer {     
     width: $(main.column.right.width);     
} ]]> 
</b:template-skin>

Saya harap posting ini akan membantu Anda. Jika ada masalah atau saran silahkan untuk meninggalkan komentar.