MENGATUR PROPERTI DARI CONTAINER

BELAJAR MEMBUAT BLOGGER TEMPLATE 4

Dalam tutorial ini, kita akan belajar dasar dari kode apa saja yang mengatur property dari kotak (selanjutnya sebut saja container). Untuk membuat semuanya lebih sederhana, kita akan melihat 2 container saja, yaitu main dan post. Jika kita mengerti dua ini otomatis kita juga bisa mengerti yang lain karena kodenya mirip bahkan hampir sama.

Ini contoh kode keduanya :
#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 and .post adalah judul dari setiap container. Setiap kode container harus ditulis dalam {…}. Untuk penjelasan di bawah ini, kita akan focus pada kode dalam container post, terutama untuk penjelasan tentang margin dan padding ( kode yang berwarna merah)

• Margin – mengatur jarak antara garis luar container ke garis dari container induk yang di luarnya (lebih besar). Ada 4 angka yang didefinisikan pada margin property. Pertama, margin atas (top margin), kedua margin kanan(right margin), tiga margin bawah (bottom margin), dan yang terakhir margin kiri (left margin). Ini diatur dengan berdasar pada arah putar jarum jam yang dimulai dari atas. Dalam kasus di atas, container induk dari container post adalah container main. Lihat bagaimana garis putus-putus pada bagian biru (post) ditempatkan di dalam bagian hijau (main), mengikuti post margin command (pengaturan margin di atas). Jika semua margin diatur menjadi nol, post container ukurannya akan sama seperti main container. Pahami bahwa margin adalah perintah yang memindahkan garis tepi menjauhi garis tepi induk. Hal lain, margin bisa memiliki nilai negative, dimana berarti itu menggeser keluar garis tepi induk dan tumpang tindih (tidak jauh dari itu)

• Padding – mengatur jarak antara garis tepi container ke container anakan (lebih kecil) di dalamnya. Contoh kasusnya adalah bagian post container dan post body. Keempat angka itu mengatur padding searah jarum jam juga seperti property margin. Kita bisa lihat bagaimana padding menempatkan post body di dalam post container. Geraknya menjauhi garis putus2. Tidak seperti margin, padding adalah perintah yang memindahkan tepi container anakan menjauhi garis tepinya. Nilai padding tidak mungkin negative.

• Min-width and Max-width – Mengatur lebar container. Sebenarnya cukup menuliskannya width=400px (hanya contoh), tapi ada yang punya kebiasaan untuk mengatur lebar seketat mungkin, karena jika ukuran tersebut tidak dikoding dengan ketat, lebar container mungkin membesar dan mengecil dengan bebas dalam situasi tertentu dan browser yang berbeda. Jadi dengan mengatur lebar dengan ketat, tampilan template akan terlihat sangat pas seperti yang diinginkan pada setiap browser (Jadi dengan mengatur secara ketat, tampilan blog di setiap browser pasti akan sama. Jika sempat melihat template2 baru di ourblogger.com, Template-template itu diatur secara berlebihan, didefinisikan di dalam main wrapper lalu didefenisikan juga di main container padahal sangat sama. Dengan melakukan itu kita akan menyelesaikan beberapa aligment bug yang terlihat (meskipun sampai sekarang belum bisa dimengerti mengapa hal itu bisa menyelesaikan masalahnya.

• Background – mengatur warna latar belakang kotak. Pengaturan ini menggunakan warna dengan kode hexadecimal. Lihat di sini untuk mengetahui semua kode warna. Kita juga bisa menambahkan latar belakang gambar yang mengulangi dirinya sendiri untuk melapisi semua bagian container. Caranya melakukan ini adalah mengarahkan url gambar. Untuk detailnya, lihat tutorial dari W3Schools. Kita juga bisa mengatur nilai dari $samplevariable, dimana variable ini bisa didefenisikan pada subsection 1 dalam Struktur Style CSS..

• Color – mengatur warna text menggunakan code warna hexadecimal, atau variable yang sudah didefenisikan sebelumnya di Subsection 1.

• Font – mengatur text font. Kita masih bisa menggunakan variable yang diatur pada subsection 1. Lihat W3Schools untuk lebih detail.

• Text-align – Mengatur text alignment. Ada 3 option, yaitu left, center, dan right.

• Line-height – Mengatur jarak atau tinggi garis

Tutorial ini memberikan informasi dasar untuk beberapa kode blogger template. Tutorial ini sudah mengungkapkan pengertian dasar dari margin dan padding. Detailnya bisa dilihat di w3Schools CSS Tutorial Sebagai sumber yang cukup dipercaya