Desain Template Blogger: Tutorial 4
<< Tutorial 3: Struktur Bagian CSS
>> Tutorial 5: Bagian dan Elemen Umum Template Blogger
Kembali ke Daftar Isi
Dalam tutorial ini akan dijelaskan dasar-dasar kode untuk mengatur properti di setiap bagian pada CSS. Untuk membuatnya mudah, kita akan mempelajari 2 bagian saja, yaitu bagian Main dan Post. Setelah anda memahami ini, diharapkan bisa mengerti bagian lain, karena strukturnya hampir sama.
Berikut ini contoh kode bagian Main dan Post:
#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: #111111;
font: $textFont;
}
.post {
margin: 0px 20px 10px 0px;
padding: 10px 20px 10px 2px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;
}
#Main dan .post adalah judul dari setiap bagian yang ada di CSS. Kode properti dari setiap bagiannya harus ada dalam tanda {.......} . Untuk sementara kita focus untuk kode yang ada di bagian .post, terutama kode yang ditulis dengan warna merah, yaitu margin dan padding.
- Margin - mengatur jarak dibagian tersebut dengan bagian yang lebih besar yang ada diluarnya. Ada 4 angka untuk mengatur properti dari margin, yaitu angka 1: mengatur margin atas, angka 2: margin kanan, angka 3: margin bawah dan angka 4: margin kiri. Pada dasarnya mengatur properti margin adalah searah jarum jam, yang dimulai dengan margin atas. Pada kasus diatas, bagian induk untuk post adalah bagian Main. Lihat garis putus-putus yang ada diluar batas warna biru (bagian post), ditempatkan didalam warna hijau (bagian Main) adalah berdasar pada kode perintah, tulisan yang berwarna merah yang ada dibagian .post. Jika semua properti margin di .post di set 0, maka ukuran dari bagian .post akan sama persis dengan bagian Main. Margin boleh bernilai negatif, artinya jika bernilai negatif maka bagian perbatasan akan mengarah ke batas bagian induknya, dan mungkin akan tumpang tindih.
- Padding - mengatur jarak pada bagian tersebut dengan bagian yang lebih kecil yang ada didalamnya. Dalam bagian .post dikasus diatas, bagian yang lebih kecil adalah Post-body. Ada 4 angka juga untuk mengatur properti dari padding, yang didefinisikan sama dengan bagian margin, yaitu searah dengan jarum jam yang dimulai dari atas. Lihat bahwa artikel yang ada dibagian post-body ada didalam bagian post. Tidak seperti Margin, Padding tidak boleh bernilai negatif.
- Min-width dan Max-width - mengatur lebar dari setiap bagiannya. biasanya cukup dituliskan width = 400 px (untuk contoh), akan tetapi menjadi lebih bagus jika mengatur lebar sedetail mungkin, karena jika tidak ditulis secara detail terkadang lebar dari suatu bagian yang sudah didefinisikan akan berubah semakin kecil/lebar dalam beberapa situasi dan dilihat dengan browser yang berbeda. Dengan mengatur lebar sedetail mungkin diharapkan lebar akan terlihat sesuai dengan yang diinginkan walau dilihat dengan browser yang berbeda-beda. Dengan mengatur lebar sedetail mungkin dapat juga untuk menghindari bug pada saat dibuka di browser.
- Background - mengatur warna latar belakang dari suatu bagian. Pengaturan ini menggunakan kode heksadesimal untuk warna. Untuk nilai dari kode heksadesimal dari warna, dapat dilihat disini. Selain warna, gambar juga dapat dipasang sebagai latar belakang. Secara lebih detail penulisan kode penggunaan gambar sebagai latar belakang dapat dilihat di tutorial W3Schools. Anda juga bisa menentukan sebuah nilai $samplevariable, dimana variable tersebut telah anda definisikan di sub bagian 1 di struktur CSS.
- Color - mengatur warna tulisan dengan menggunakan kode heksadesimal atau variable yang telah didefinikasn di awal awal sub bagian 1.
- Font - mengatur huruf dari tulisan. Untuk pengaturan lebih detail dapat dilihat di W3Schools.
- Text-align - mengatur alignment tulisan. Ada 3 opsi pilihan, yaitu, left, center atau right.
- Line-height - mengatur jarak, atau tinggi, diantara 2 baris tulisan.
___________________
Sumber: Our Blogger Templates