Untuk menyesuaikan pada tampilan template dibuatlah variabel dengan nilai/value untuk menentukan rincian css templatenya. Sehingga, jadilah template seperti yang kita kenal sekarang ini tersedia gratis pada saat membuat blog baru di blogger.com. Berikut ini adalah contoh variabel css sebuah template di blogger.com:
Variabel dengan nama: "body.font" itu mengatur, font/huruf yang ada pada selector "body", misalnya:<style id='page-skin-1' type='text/css'><!-- /* ----------------------------------------------- Blogger Template Style Name: Simple Designer: Josh Peterson URL: www.noaesthetic.com ----------------------------------------------- */ /* Variable definitions ==================== <Variable name="keycolor" description="Main Color" type="color" default="#66bbdd"/> <Group description="Page Text" selector="body"> <Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/> <Variable name="body.text.color" description="Text Color" type="color" default="#222222"/> </Group>
body{
font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;
font-size: normal;
atau,
font-size: 12px;
}
Misalnya yang ingin diubah adalah jenis font dan ukuran yang berbeda dari contoh script CSS diatas, sehingga menjadi sebagai berikut:
body{
font-family: Verdana;
font-size: 13px;
}
Begitu juga dengan script CSS yang lain dibawahnya. Intinya, hanya script itu saja yang diubah dan tidak mengubah data yang ada di Variabel.
Oleh karena bahasan ini akan menuju sebuah bahasan pokok, yaitu: Bagaimana membangun template sendiri tanpa menggunakan bundle.css dan variabel CSS blogger.com (baca: skin template blogger.com), maka bahasan akan semakin detail dan tidak cukup dibahas dalam satu halaman ini. Oleh karena itu, akan diterangkan di posting selanjutnya.
Mengenal Selector CSS
Selector CSS ada 4 jenis: (Istilah berikut ini tidak sama dengan istilah asli pemrograman CSS, jadi penulis blog ini akan menggunakan istilah lain dengan tujuan yang sama).- Selector Umum
Selector umum itu mencakup:
body (untuk mengatur secara umum suatu tubuh template)
table, termasuk tr, td, th, tbody (untuk mengatur tabel)
ul, termasuk ol dan li (mengatur list atau suatu daftar)
p (untuk mengatur paragraph)
br (untuk mengatur baris baru)
hr (untuk mengatur garis horizontal)
img {untuk mengatur image atau gambar)
Selain itu juga yang termasuk selector umum adalah bagian-bagian template, yaitu:
header (mengatur secara umum header atau kop sebuah blog)
main (mengatur body of content atau konten dimana didalamnya ada artikel, widget, dsb)
footer (mengatur catatan kaki/footer sebuah blog)
nav (mengatur navigasi atau menu sebuah blog)
a {mengatur LINK/URL secara umum)
a:link (mengatur link yang belum pernah diklik/ dikunjungi)
a:active (mengatur link aktif)
a:visited (mengatur link setelah dikunjungi atau diklik)
a:hover (mengatur link pada saat user meletakkan pointer diatas sebuah Link/URL)
h1{mengatur heading 1)
h2 (mengatur heading 2)
h3 (mengatur heading 3)
dan seterusnya hingga heading 6 atau h6.
serta banyak lagi yang lainnya. - Selector ID
Selector ID adalah selector yang didahului dengan tanda #
misalnya:
#sidebar-kiri {
width: 30% ;
height: auto ;
}
Contoh diatas - #sidebar-kiri - termasuk selector ID. Selector ID ini dapat diberi nama sesuai dengan keinginan kita atau nama tersebut mewakili obyek yang akan kita atur melalui selector ID tersebut yang dalam hal ini adalah "sidebar-kiri" - Selector Class
Selector Class adalah selector yang penulisannya didahului oleh tanda titik .
Misalnya:
.footer {
width: 100% ;
margin: 0 auto ;
padding: 20px 0px 10px 0px;
} - Selector Asterik
Selector Asterik adalah selector yang tidak memerlukan nama pengenal atau nama wakilnya. Jadi, hanya menggunakan tanda asterik atau * yang mana maknanya bersifat umum dan mengacu pada semua hal yang berkenaan dengannya.
misalnya:
* {
border: 0px;
}
Bila kita memberi nilai 0px pada border didalam selector asterik maka, tabel yang menggunakan garis dan seluruh jenis hr akan tidak memiliki garis lagi karena sudah bernilai 0px. Dan ini berlaku pada setiap halaman yang di-LINK-an pada CSS tersebut.
Lihat ilustrasi berikut ini!
Apa perbedaan antara Selector ID dan Selector CLASS
Selector ID bersifat unik, tidak berlaku untuk lebih dari satu. Misalnya, sebuah widget didalamnya terdapat Selector ID sehingga pada saat membuat widget baru, tidak dapat menggunakan Selector ID yang sama. Sedangkan Selector Class dapat berlaku lebih dari satu selector class pada banyak widget.perhatikan contoh berikut ini:
Selector ID
#kolom-kiri {
width: 320px;
}
Contoh implementasi:
<b:section class='kolom' id='kolom-kiri'>
<b:widget id='Header1' locked='false' title='' type='Header'></b:widget>
</b:section>
Selector CLASS
.kolom {
font-family: Arial;
Font-size:12px;
}
#kolom-kanan{
width: 400px;
}
Contoh implementasi:
<b:section class='kolom' id='kolom-kanan'>
<b:widget id='Header2' locked='false' title='' type='Header'></b:widget>
</b:section>
Bila dilihat dari contoh diatas, selector class mengatur secara umum atas "KOLOM" itu artinya, apa2 yang ada didalam KOLOM (font-family dan font-size) akan berlaku pada selector ID #kolom-kiri dan #kolom-kanan.
Akan tetapi, Nilai pada #kolom-kiri berbeda dengan #kolom-kanan dalam hal width atau lebar kolom.
Semoga Bermanfaat!