Assallamuallaikum Wr Wb..

Cara Mengedit Css Bagian Header

Selamat malam sahabat BP !!

Di kesempatan yang baik ini saya akan membahas tentang Cara Mengedit Css Bagian Header ini adalah lanjutan dari tutorial sebelumnya yang dimana telah sampai pada bagian body & sekarang akan saya jelaskan untuk bagian header.

Header merupakan selector untuk mengatur bagian atas blog yang mencakup judul blog, deskripsi blog & menu navigasi (Home, Tentang Saya, Navigation) atau juga bisa di bilang header adalah kepala blog.

Saat kita mau mengatur header di css, maka anda harus mencari tahu kode selectornya terlebih dahulu, agar anda lebih mudah untuk mengeditnya. Untuk mengetahui kodenya anda bisa melihat di template bawaan situs yang anda kelola, biasanya ada di bagian atas sendiri kodenya. Karena kode yang dipakai setiap situs pasti berbeda dengan situs lainnya.

Namun untuk percobaan kali ini saya akan memakai kode selector header pada umumnya khususnya di template BP, agar anda lebih mudah untuk memahaminya.


Baca Juga = Cara Belajar Membuat Css Tahap Ketiga | Part 2

Sekarang kita coba membuat header dengan warna background putih, warna font hitam, warna link hijau & warna background menu navigasi adalah biru muda & kita buat jarak antara elemen tidak terlalu dalam, maka kodenya sebagai berikut ini !!

#header { margin:0;padding:0;background:#ffffff;color:#000000;text-align:center; }

.heading { margin:3px;padding:4px;font-size:12px; }

.heading a { color:#0000ff; }

.description { margin:0;padding:7px 6px;background:#ffffff; }

#navigation { margin:0;padding:6px;text-align:left;background:#ff0000; }

#navigation a { color:#00f;text-decoration:none; }

#navigation span { display:inline-block;width:25%;margin:0;padding:5px;background:#ff0000;text-align:center; }

Kode di atas akan menghasilkan tampilan seperti Klik Di Sini !

Seperti yang anda lihat pada halaman preview tersebut, bahwa terdapat background putih pada header & background biru muda pada menu navigasi, wana font hitam & warna link hijau, hasil yang dimunculkan sesuai dengan apa yang telah dirancang di dalam kode css tersebut.


Baca Juga = Cara Belajar Membuat Css Tahap Ketiga | Part

Property di atas bisa anda kurangi atau anda tambah sesuai keinginan & kebutuhan, property yang bisa di pakai tidak itu-itu saja, banyak property yang bisa anda gunakan untuk kebutuhan mendesain css yang telah anda rancanakan sebelumnya.

Mendesain css sebenarnya tidak rumit seperti yang kita bayangkan, melainkan mudah jika anda sudah mengerti tentang fungsi dari selector & properti yang ada, membuat css di ibaratkan kita membuat masakan. Jika kita sudah mengatahui bumbu, bahan & cara masaknya pasti kita bisa membuat masakan itu, tinggal bagaimana kita menakar seberapa banyak bumbu yang harus dimasukkan ke dalam masakan tersebut, agar nantinya masakan yang kita buat terasa enak di lidah.

Sama halnya seperti kita membuat css, tinggal bagaimana cara kita memadukan warna, ukuran & desain yang tepat & rapi. Agar nantinya css yang kita buat enak di lihat oleh pengunjung blog kita, intinya adalah pintar-pintarlah dalam memilih warna, menentukan ukuran & desain css.

Warna adalah yang paling penting dalam membuat css, perpaduan warna yang pas akan membuat tampilan css terasa sempurna. Dalam hal memadukan warna memang agak sulit dilakukan, karena kita di tuntut sekreatifitas mungkin agar perpaduan warna yang satu dengan yang lainnya serasi, tanpa melakukan ini maka tampilan css akan terasa hambar.

Saran saya usahakan warna yang digunakan tidak terlalu cerah atau pilihlah warna yang soft (lembut), agar mata para pengunjung tidak silau & merusak mata mereka. Anda pasti ingin para pengunjung betah berlama-lama di blog kita kan, maka buatlah para pengunjung itu senyaman mungkin berada di blog anda.

Demikian yang dapat saya sampaikan tentang Cara Mengedit Css Bagian Header semoga apa yang saya sampaikan bisa bermanfaat buat kalian semua, amin..

Mohon maaf jika apa yang saya sampaikan sulit dimengerti, & saya mengucapkan terima kasih banyak sudah berkunjung ke blog saya..

Wassallamuallaikum Wr Wb..