Membuat Template Blogger Part 3 Lengkap (Mengatur Properti di CSS)

Dalam tutorial kali ini, Sundaku akan menjelaskan dasar-dasar kode untuk mengatur properti di setiap bagian pada CSSUntuk pemula, kita akan pelajari 2 bagian sederhana dari CSS, yaitu bagian Main dan Post

Berikut ini contoh kode CSS, untuk bagian Main dan Post:




#Main dan .post adalah judul dari setiap bagian yang ada di CSS
Kode properti dari setiap bagiannya harus ada dalam tanda {.......}
Untuk sementara kita fokus untuk kode yang ada dibagian .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 sebagai berikut :
Angka Pertama: 
Mengatur margin atas 

Angka kedua: 
Mengatur margin kanan

Angka ketiga:
Mengatur margin bawah

Angka ke Empat: 
Mengatur 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 PostbodyAda 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. 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 kesalahan pada saat penulisan kode.

Background
Mengatur warna latar belakang dari suatu bagian. Pengaturan ini
menggunakan kode heksadesimal untuk warna. Selain warna, gambar juga dapat
ditetapkan sebagai latar belakang.

Color : mengatur warna tulisan dengan menggunakan kode heksadesimal untuk warna.
Font : mengatur huruf dari tulisan.
Text-align : mengatur alignment tulisan. Ada 3 opsi pilihan, yaitu: left, center dan right.
Line-height : mengatur jarak, atau tinggi, diantara 2 baris tulisan.

Tutorial ini hanya dasar saja beberapa kode dalam template blogger.  
Yang paling penting adalah sobat mengerti tentang kode perintah Margin dan Padding.

Baiklah tutorial kali ini, mungkin  sampai disini dulu ya sobat, nanti kita akan melangkah ke tahap selanjutnya tentang Bagian dan unsur-unsur yang ada didalam template blogger yang akan sundaku post pada artikel selanjutnya dengan judul Membuat Template Blogger Part 4( Bagian dan Elemen Umum Template Blogger ).

Terima kasih

Salam,
www.sundaku.com

Berlangganan update artikel terbaru via email: