Tutorial Membuat Themes Blogspot 4

Dalam Tutorial ini anda akan mengetahui pengaturan kode dari sebuah kontainer. Untuk memudahkan secara sederhana kita akan melihat hanya 2 blok kontainer yaitu Main dan Post. Setelah anda mengerti maka anda bisa implementasikan pada kontainer yang lain karena dasarnya adalah sama.

Berikut adalah contoh untuk 2 kode kontainer yang akan kita bahas :

#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 kontainer. Setiap kode kontainer harus ditulis dalam tanda {....}. Dalam penjelasan dibawah ini kita akan fokus dalam bagian .post terutama pada bagian margin dan padding (kode atas yang berwarna merah)

• Margin mengatur jarak border kontainer dengan border kontainer diluarnya. Ada 4 nomor yang mendefinisikan properti margin. Nomor yang pertama mengatur top margin, yang kedua mengatur right margin, yang ketiga mengatur bottom margin dan yang keempat mengatur left margin. Secara umum mengatur margin sesuai dengan arah jarum jam dari top margin. Dalam kasus diatas Kontainer terluar adalah kontainer utama. Lihat gambar diatas untuk pembatasan jarak antar kontainer, kontainer biru (post) berada didalam kontainer utama hijau (main), mengikuti perintah margin blok kode yang berwarna merah. Jika marginnya diatur ke angka 0 (nol) maka lebar halaman posting (warna biru) akan sama dengan lebar main (warna nijau). Pikirkan bahwa margin berfungsi mengatur kontainer yang ada dengan kontainer diluarnya (post biru dan main hijau). Pikirkan jika margin mempunyai nilai negatif maka akan mempunyai ukuran yang lebih besar daripada margin luarnya.
• Padding mengatur jarak batas antara kontainer luar dengan kontainer didalamnya. Lihat dalam gambar diatas kontainer post (biru) mengatur jarak kontainer didalamnya yaitu post-body. 4 nomor pengaturan dalam padding diatur dan ditulis searah jarum jam sama seperti pengaturan dalam margin. Lihat pada gambar bagaimana posisi post-body menempatkan text didalam kontainer post jauh dari batas garis yang putus-putus. Tidak seperti margin, pikirkan bahwa padding mengatur jarak dari kontainer luar ke kontainer di dalamnya dan nilainya tidak bisa negatif.
• Min-width dan Max-width mengatur lebar kontainer. Biasanya cukup menuliskan sebagai width = 400px misalnya, tetapi saya terbiasa mengatur lebar dengan seketat mungkin karena kalau tidak ketat maka untuk browser yang lain akan menyusut atau lebih lebar dari browser yang kita gunakan. Jadi dengan mengatur lebar yang ketat tanpa ruang kosong akan mengurangi bug alingment yang terdapat pada browser yang berbeda-beda. Jika anda melihat template saya yang baru saya mengatur beberapa margin lebih berlebihan misalnya di Main-Wrapper dan Main Kontainer meskipun mereka hampir sama. Dengan cara itu saya dapat mengatasi bug yang terjadi pada browser yang berbeda-beda (meskipun saya tidak tahu bagaimana hal itu bisa terjadi)
• Background mengatur warna background dalam kontainer. Lihat disini untuk melihat nilai semua warna. Anda juga dapat menetapkan gambar latar belakang yang berulang untuk menutupi seluruh blok kontainer. Cranya dengan menunjuk ke URL suatu gambar. Cra pengaturan lebih lanjut silahkan berkunjung ke W3school tutorial. Anda juga dapat mengatur nilainya menjadi $samplevariable dimana variabel adalah salah satu yang anda tetapkan didalam SubSection 1 CSS Styling Section.
• Color mengatur warna teks menggunakan warna heksadesimal atau variabel yang didefinisikan sebelum SubSection 1.
• Font mengatur jenis font teks anda. Anda dapat menggunakan variabel yang ditetapkan pada SubSection 1. Lihat tutorial di W3School untuk pengaturan font lebih lanjut.
• Text--align mengatur alignment teks anda. Terdapat 3 pilihan kiri tengah kanan.
• Line height mengatur jarak tinggi antara dua baris dalam teks.

Tutorial saya hanya memberikan beberapa kode dasar dalam template blogger. Yang paling penting dalam pemahaman dasar adalah margin dan padding menurut saya. Jika anda ingini penjelasan yang lebih rinci tentang CSS Styling silahkan berkunjung ke W3School tutorial.