Assalamualaikum wr.wb..

Dalam Tutorial Sebelumnya kita sudah membahas tentang body css mywapblog yang saya rasa kalian sudah bisa menulis sendiri,tanpa haruz lihat kesana kemari lagi,.
dan kemarin dapat kita ambil sampel-nya sbb:..

body { background:black url(alamat gambar kamu atau bisa dikosongin) no-repeat; border:1px solid red; margin:1px; text-align:center }
body p {color:green}
body a {color:red}


Sampel diatas hanyalah sebuah contoh simpel-nya saja..

kalian juga bisa nambah property-nya, tapi walaupun cuma itu saya rasa sudah cukup untuk bagian body css mwb. .

Lanjut kebawah

HEADER

Didalam pengaturan header kita ambil yang simple saja dulu. . .

Misal :

kita akan menambah background,border,batas tepi kedalam agar lebih rapi, dan pengaturan text-nya..

Contoh:

#header { background:black; border:1px solid green; margin:0px; padding:3px; text-align:center }

Perhatikan contoh diatas!!

kenapa di post ku kemarin aku tidak memakai property padding ? karena padding adalah jarak kedalam dari suatu elemen, jadi kita bisa mengatur jarak-nya dari dalam saja agar lebih mudah diingat saat mengatur bagian lainya seperti dibawah header dan seterusnya agar terlihat lebih rapi dalam posisinya !! dan kita tinggal gunakan margin untuk mengatur jarak bagian luarnya. sehingga jika margin:0px diantara elemen body dan header akan menempel.

Sudah jelas dan bisa dibayangkan kan sob?..

Sekarang untuk warna dari bagian header yang tepatnya untuk warna deskripsi dibawah nama blog kamu!!

Contoh:

#header p { color:green }

Dan untuk warna huruf link-nya misal:

#header a { color:red }

Warna ini biasanya muncul jika iklan sebuah blog terlihat dibagian header, jika tidak ingin mengatur-nya hilangin saja selector header a nya. . .

Dan untuk mengatur dari judul blog kamu kita gunakan selector #header h1 a

Contoh:

#header h1 a { color:red }

Dan silahkan ditambah sendiri property untuk #header h1 a nya. kalian bisa tambah bentuk, posisinya, jaraknya dan ukuran-nya dan apapun terserah, tapi bagiku itu sudah cukup!! Semoga sobat sudah mengerti dengan penjelasanku diatas. . .


LANJUT KEBAWAH

Sekarang kita akan mengatur bagian kolom pencarian atau #search_form.
Didalam kolom pencarian simple-nya ada 2 elemmen yang akan kita atur penempatanya agar lebih rapi.

yaitu:

search_form [type=text] adalah bagian tempat penulisan dan

search_form [type=submit] adalah bagian tombol pencarian-nya. . .

yups,kita mulai. . !!

Pertama-nya kita atur dulu bagian #searchform

Contoh:

kita akan memberi background,jarak,border dan posisi text-nya

#searchform { background:black; border:1px solid green; margin:0px; text-align:center }

ket:

kenapa aku beri border green? karena agar sama warnanya dengan border header, dan margin untuk jarak luarnya menempel dengan body agar serasi dengan bagian header, dan lagi-lagi aku tidak memakai padding atau jarak kedalam-nya,karena akan kita atur lewat bagian dalam saja melalui #searchform [type=text] dan #searchform [type=submit] saja. . .

Mungkin sudah jelas,dan sekarang bagian dalam #searchform

Untuk #searchform [type=text] atau bagian kolom penulisan dalam kotak pencarian.,

contoh:

#searchform [type=text] { background:green;border:1px solid red; margin:0px; color:yellow; width:70% }

ket:

perhatikan contoh diatas!! kenapa aku pake property width ? jadi width kita atur agar ukuran panjang-nya bisa rapi didalam elemmen #searchform yang telah kita atur sebelum-nya ! dan bagaimana jika tidak menggunakan property width ? lihat saja hasilnya kawan dalam percobaan kalian, pasti akan lari keluar pagar body yang telah kita tentukan. dan akibatnya kerapian css kita jadi amburadul. Mungkin itu sudah jelas. Dan untuk ukuranya bisa kalian sesuaikan sendiri,.

Lanjut berikut-nya!!

Sekarang kita mengatur bagian #searchform [type=submit] atau tombol pencarian..

contoh:

#searchform [type=submit] {background:green; border:red; margin:0px; color:red; width:30% }

ket:

Penjelasanya seperti diatas dan bisa kalian praktek-kan dulu biar lebih jelas.

sudah dulu boz, lagi2 jariku sudah pegel baget buat nulisnya.
semoga bermanfa'at.. Next