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 diterangkan dasar-dasar arahan untuk mengendalikan properti di setiap bab pada CSS. Untuk menjadikannya mudah, kita akan mempelajari 2 bab saja, yaitu bagian Main dan Post. Setelah anda mengetahui ini, diharapkan bisa mengerti bab lain, sebab strukturnya hampir sama.
Berikut ini acuan isyarat 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 bab yang ada di CSS. Kode properti dari setiap bagiannya mesti ada dalam tanda ……. . Untuk sementara kita focus untuk instruksi yang ada di bab .post, khususnya arahan 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 mengendalikan properti dari margin, yaitu angka 1: mengatur margin atas, angka 2: margin kanan, angka 3: margin bawah dan angka 4: margin kiri. Pada dasarnya mengendalikan properti margin yakni searah jarum jam, yang dimulai dengan margin atas. Pada perkara diatas, bab induk untuk post ialah bab Main. Lihat garis putus-putus yang ada diluar batas warna biru (bab post), ditempatkan didalam warna hijau (bagian Main) yaitu berdasar pada aba-aba perintah, goresan pena 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 kalau bernilai negatif maka bagian perbatasan akan mengarah ke batas bagian induknya, dan mungkin akan tumpang tindih.
- Padding – mengendalikan jarak pada bagian tersebut dengan bagian yang lebih kecil yang ada didalamnya. Dalam bab .post dikasus diatas, bab yang lebih kecil adalah Post-body. Ada 4 angka juga untuk mengontrol properti dari padding, yang didefinisikan sama dengan bagian margin, yakni searah dengan jarum jam yang dimulai dari atas. Lihat bahwa postingan yang ada dibagian post-body ada didalam bagian post. Tidak seperti Margin, Padding tidak boleh bernilai negatif.
- Min-width dan Max-width – menertibkan lebar dari setiap bagiannya. biasanya cukup dituliskan width = 400 px (untuk acuan), akan tetapi menjadi lebih cantik jikalau mengendalikan lebar sedetail mungkin, alasannya adalah bila tidak ditulis secara detail terkadang lebar dari suatu bab yang sudah didefinisikan akan berganti kian kecil/lebar dalam beberapa suasana dan dilihat dengan browser yang berbeda. Dengan mengontrol lebar sedetail mungkin dibutuhkan lebar akan tampaksesuai dengan yang dikehendaki walau dilihat dengan browser yang berlainan-beda. Dengan mengontrol lebar sedetail mungkin mampu juga untuk menghindari bug pada ketika dibuka di browser.
- Background – mengatur warna latar belakang dari sebuah bagian. Pengaturan ini memakai isyarat heksadesimal untuk warna. Untuk nilai dari isyarat heksadesimal dari warna, mampu dilihat struktur CSS.
- Color – mengontrol warna goresan pena dengan menggunakan aba-aba heksadesimal atau variable yang telah didefinikasn di permulaan awal sub bab 1.
- Font – mengendalikan karakter dari goresan pena. Untuk pengaturan lebih rincian dapat dilihat di W3Schools.
- Text-align – menertibkan alignment tulisan. Ada 3 opsi opsi, ialah, left, center atau right.
- Line-height – mengontrol jarak, atau tinggi, diantara 2 baris tulisan.
Tutorial ini hanya dasar saja beberapa aba-aba yang penting dalam tamplate blogger. Yang terpenting ialah memahami tentang aba-aba perintah Margin dan Padding. Jika ingin berguru yang lebih detail perihal isyarat di CSS, saya mengusulkan untuk berguru di w3Schools CSS Tutorial.
___________________
Sumber: Our Blogger Templates