Membuat Template Blog : Bagian Ketiga

Pada bagian kedua saya telah membahas mengenai struktur kode HTML template blog. Saya membagi struktur kode HTML blog kedalam tiga bagian. Yaitu bagian Head, CSS, dan bagian kode HTML sendiri. Untuk bagian head saya tidak akan membahasnya lebih lanjut karena tidak begitu berpengaruh terhadap tampilan layout template blog. Pada bagian ini saya akan langsung membahas bagian kedua yaitu bagian CSS.

CSS singkatan dari Cascading Style Sheets. CSS berguna untuk mengatur tampilan layout dari bagian bagian template blog, misalnya bagian header, main, sidebar dll. Pada bagian pertama saya telah membagi bagian-bagian layout kedalam beberapa bagian. Yaitu body (area berwarna merah), outer-wrapper(area berwarna kuning), header-wrapper(area berwarna hijau muda), content-wrapper(area berwarna ungu), main-wrapper(area berwarna biru tua), sidebar(area berwarna hijau tua), dan footer(area berwarna biru muda). Silahkan perhatikan kembali gambar berikut



Untuk mengatur tampilan bagian bagian tersebut kita menggunakan CSS. Kode kode CSS sendiri terdiri dari selector, properties, dan value. Misalnya kita ingin mengatur tampilan layout body. Maka CSS untuk bagian body akan seperti ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

"body" merupakan selector. "Background", "margin", "color", "font", "font-size" dst adalah properties dari "body" selector, sedangkan "$bgcolor", "0", "$textcolor" dst adalah value dari properties. Untuk mengatur tampilan layout yang kita rubah adalah value.
Saya akan menjelaskan sedikit mengenai CSS. Karena ini bukanlah tutorial mengenai CSS, mungkin penjelasan saya nantinya dirasa kurang lengkap. Saya hanya akan menjelaskan kode kode CSS yang sering digunakan untuk mengatur layout template blog.
Dengan CSS kita bisa mengatur properties dari masing masing selector. Apa saja yang bisa kita atur?
Lebar dan tinggi
Kita bisa mengatur lebar atu tinggi dari area bagian template kita, misalnya kita ingin mengatur lebar dari header maka kita menambahkan kode CSS seperti ini
#header-wrapper{
width: 800px;
height: 150px;
}
Warna background
Warna background dari masing masing bagian bisa kita atur dengan megatur properties background, misalnya untuk header kita menginginkan berwarna hitam maka kita tambahkan kode CSS seperti ini
#header-wrapper{
background: black;
)
Untuk warna kita bisa menuliskan langsung menuliskan nama warna,misalnya red, yellow, blue dll. atau menggunakan RGB value, atau dengan kode hexadecimal. Anda bisa mencari dengan google informasi mengenai warna untuk web.
Margin dan Padding
Margin adalah jarak antara sebuah bagian dengan bagian yang membungkusnya. sedangkan padding adalah jarak antara sebuah bagian dengan bagian yang berada didalamnya. Untuk ilustrasi perhatikan Kode CSS untuk bagian Outer-wrapper dari template minima
Kode CSS nya seperti ini

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

margin dari outer-wrapper bernilai nol yang berarti tidak ada jarak antara outer wrapper dengan bagian yang membungkusnya, dalam hal ini adalah bagian body.Masih ingat tentang struktur layout dari sebuah template. Sedangkan properties padding bernilai 10px. Hal ini berarti jarak antara outer-wrapper dengan bagian yang dibungkusnya (dalam hal ini adalah bagian header-wrapper, content-wrapper, dan footer) adalah 10 pixel di semua sisi (atas-samping kanan-bawah dan samping kiri). Kalau digambarkan kira-kira akan seperti ini



Ada beberapa ketentuan dalam penulisan nilai dari properties margin dan padding. Anda bisa menuliskannya per-sisi atau dituliskan bersama-sama. Untuk menuliskan bersama sama anda harus menuliskannya sesuai dengan arah jarum jam. pertama adalah untuk sisi bagian atas lalu sisi bagian kiri kemudian bawah dan terakhir bagian samping kiri. Atau jika anda mengatur keempat sisi memiliki nilai yang sama anda cukup menuliskannya sekali, seperti contoh diatas. Atau jika anda mengatur bagian atas dan bawah memiliki nilai yang sama sedangkan bagian kanan dan kiri juga memiliki nilai yang sama maka anda cukup menuliskannya dua kali. Yang pertama sisi atas dan bawah sedangkan berikutnya untuk sisi kanan dan kiri. Contoh:
Penulisan untuk tiap tiap sisi:
#outer-wrapper{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
akan sama dengan (penulisan secara bersama-sama):
#outer-wrapper{
margin: 10px 10px 10px 10px;
}
sama dengan (penulisan atas-bawah dan kanan kiri):
#outer-wrapper{
margin: 10px 10px;
}
sama dengan (penulisan satu kali atas=kanan=bawah=kiri):
#outer-wrapper{
margin: 10px;
}

Selain yang sudah saya jelaskan diatas anda juga bisa mengatur properties dari tiap tiap,seperti jenis dan warna huruf dll. Siiipp....untuk bagian CSS saya kira cukup sekian saja. Silahkan berlatih sendiri mengutak atik bagian template dan lihat hasilnya dan tentu saja perbanyak membanya referensi mengenai CSS. Semakin banyak berlatih, belajar dan membaca anda akan semakin jago. Jika ada yang kurang jelas silahkan tinggalkan komentar di box comment, saya akan menjawabnya semampu saya. Hehehehe maklum sama sama lagi belajar.Selanjutnya saya akan menjelaskan mengenai bagian dari Kode HTML.

Related Articles by Categories