Assallamuallaikum Wr Wb..

cs.png


Tahap Sebelumnya = Cara Mengedit Css Bagian Header

Selamat sore sahabat Blogponsel, bagaimana kabar kalian semua ? Semoga baik-baik saja iya !!

Pada kesempatan ini saya akan membagikan satu tutorial lagi yaitu Cara Mengedit Css Bagian Top Content yang di mana tahap sebelumnya telah sampai pada bagian header, tahap ini sekaligus request dari teman saya yang bertanya "bagaimana cara membuat top content berada di atas" di artikel sebelumnya.

Top Content merupakan selector yang mengatur bagian dasar/alas search-form pada blog, top content menampung beberapa selector diantaranya #search-form, #search-form .inp-text & #search-form .inp-btn.

Di dalam penulisan kode css top conten akan di tulis seperti ini.

#top-content { margin:2px;padding:3px;text-align:center;background:#fff; }

#search-form { margin:0;padding:0; }

#search-form .inp-text { margin:2px;padding:5px;border:1px solid #ccc;background:#fff;color:#111;width:70%; }

#search-form .inp-btn { margin:0;padding:5px;background:#ccc;border:0;width:25%; }

Keterangan :
- #top-content adalah dasar/alas #search-form.
- #search-form adalah alas/dasar kolom pencarian.
- #search-form .inp-text adalah selector untuk mengatur kolom pencarian.
- #search-form .inp-btn adalah selector untuk mengatur tombol search.

Namun ada beberapa type css tertentu yang dimana selector #search-form .inp-text & .inp-btn menggunakan kode [type=text] & [type=submit] ini tidak ada bedanya & fungsinya tetap sama, hanya saja cara penulisannya yang berbeda. Jadi penulisannya seperti ini !

#search-form [type=text] { margin:2px;padding:2px; }

#search-form [type=submit] { margin:2px;padding:2px; }

Jadi diantara kode di atas tidak ada perbedaannya sama sekali, semua sama fungsinya.

Kita juga bisa menambahkan background gambar pada bagian top-content, caranya seperti ini !

#top-content { margin:3px;padding:5px;text-align:center;background:url(alamat gambar)left no-repeat,#fff;background-size:50% 50%; }

Keterangan :
- Url gambar silahkan anda ganti sesuai url gambar yang akan anda gunakan.
- Left adalah tempat dimana gambar akan di tempatkan, left bisa diganti dengan top, top-right, right, right-bottom, bottom, bottom-left, left & left-top.
- No-repeat adalah untuk pengulangan gambar, repeat memiliki beberapa pilihan diantaranya.
1. No-repeat berarti tidak mengulang.
2. Repeat-x mengulang secara horizontal.
3. Repeat-y mengulang secara vertikal.
- Background-size untuk mengatur ukuran gambar & nilainya bisa kalian atur sesuai kebutuhan, ekstensi value yang bisa di pakai adalah pt, px, in, em, %.

Menambahkan background gambar bisa di lakukan di semua selector & caranya sama, tinggal merubah selectornya saja !

Kita juga bisa memindahkan posisi top-content berada di atas, bawah atau dimana yang kita inginkan, caranya lumayan mudah & tidak terlalu sulit juga buat pemula. Caranya begini !

Merubah posisi selector berada di posisi tertentu bisa kita lakukan dengan cara menggunakan property tambahan yaitu position, position berfungsi untuk menentukan posisi selector.

Position memiliki beberapa nilai value diantaranya.

- Absolute.
- Relative.
- Static.

Masing-masing nilai value diatas memiliki fungsi yang berbeda, insya allah akan saya jelaskan di kesempatan berikutnya. Namun kali ini saya akan mencoba menaruh top-content berada di atas, agar lebih mudah silahkan di pelajari kode di bawah ini.

#top-content { margin:2px;padding:5px;display:block;width:95%;background:#fff;position:absolute;top:0;right:0;left:0; }


Keterangan :
- Position mengatur posisi elemen.
- Absolute memungkinkan menghapus elemen dari wadah div nya.
- Top, right & left adalah deklarasi nilai value absolute.
- Top:0 menentukan elemen berada diatas, nilai 0 bisa anda rubah sesuai kebutuhan & berekstensi px atau %.
- Right:0 menentukan elemen berada di kanan.
- Left:0 menentukan elemen berada di kiri.

Pada dasarnya penambahan property right & left agar elemen berada diantara kiri & kanan.

Demikian yang dapat saya sampaikan tentang Cara Mengedit Css Bagian Top Content semoga apa yang saya sampaikan ini bisa bermanfaat buat kalian semua.

Saya mohon maaf jika penyampaiannya sulit dimengerti, jika kalian kesulitan memahaminya silahkan bertanya di komentar. Terima kasih !!

Note :

Apabila kalian mau menggunakan kode diatas silahkan atur ulang nilai valuenya, agar sesuai dengan desain kalian.

Wassallamuallaikum Wr Wb..