Cara Membuat Sidebar Sederhana dengan CSS

Hello Sobat Sederhana! Apakah kamu ingin membuat sidebar sederhana di website-mu? Jika iya, artikel ini cocok untukmu. Di sini, kita akan membahas cara membuat sidebar sederhana dengan CSS. Simak terus ya!

Pengertian Sidebar

Sebelum masuk ke cara membuatnya, mari kita bahas terlebih dahulu pengertian dari sidebar. Sidebar adalah bagian dari tampilan website yang biasanya berada di sisi kiri atau kanan halaman dan berisi informasi tambahan atau navigasi menu.

Contoh dari sidebar adalah menu kategori pada blog, iklan, atau widget yang menampilkan profil pengarang atau arsip artikel.

Cara Membuat Sidebar Sederhana

1. Membuat HTML Dasar

Pertama-tama, mari kita buat HTML dasar untuk sidebar tersebut. Kita akan membutuhkan sebuah div dengan class ‘sidebar’. Berikut adalah contoh kodenya:

<div class="sidebar"><h2>Sidebar</h2><p>Isi sidebar</p></div>

Di sini, kita membuat sebuah div yang memiliki class ‘sidebar’. Kemudian, di dalam div tersebut, kita tambahkan sebuah elemen h2 untuk judul sidebar dan satu elemen p untuk isi sidebar.

2. Memberikan Style pada Sidebar

Selanjutnya, kita akan memberikan style pada sidebar dengan CSS. Pertama-tama, kita atur lebar dan tinggi dari sidebar. Berikut adalah kode CSS-nya:

.sidebar {width: 300px;height: 100%;}

Di sini, kita mengatur lebar sidebar menjadi 300px dan tinggi sidebar mengikuti tinggi browser.

3. Menambahkan Warna Background pada Sidebar

Kemudian, kita tambahkan warna background pada sidebar agar tampilannya lebih menarik. Berikut adalah contoh kodenya:

.sidebar {width: 300px;height: 100%;background-color: #F5F5F5;}

Di sini, kita mengatur warna background sidebar menjadi #F5F5F5 yang merupakan warna abu-abu muda.

4. Menambahkan Padding pada Sidebar

Selanjutnya, kita tambahkan padding pada sidebar agar tulisan atau elemen yang berada di dalam sidebar tidak terlalu rapat dengan dinding sidebar. Berikut adalah kode CSS-nya:

.sidebar {width: 300px;height: 100%;background-color: #F5F5F5;padding: 20px;}

Di sini, kita memberikan padding sebesar 20px pada semua sisi dari elemen sidebar.

TRENDING 🔥 Cara Membuat Teropong Sederhana dengan Gambar Pembuatannya

5. Membuat Sidebar Fixed

Terakhir, kita bisa membuat sidebar menjadi fixed pada posisinya agar ketika browser di-scroll, sidebar tidak ikut bergerak. Berikut adalah kode CSS-nya:

.sidebar {width: 300px;height: 100%;background-color: #F5F5F5;padding: 20px;position: fixed;}

Di sini, kita mengatur posisi sidebar menjadi fixed.

FAQ

Pertanyaan	Jawaban
Apakah kita bisa menambahkan lebih dari satu widget pada sidebar?	Tentu saja bisa. Kamu bisa menambahkan widget lain dengan cara menambahkan kode HTML dan CSS seperti yang sudah dijelaskan sebelumnya.
Apakah membuat sidebar bisa dilakukan dengan menggunakan framework CSS seperti Bootstrap?	Tentu saja bisa. Namun, artikel ini membahas cara membuat sidebar dengan CSS murni sehingga kamu bisa memahami cara kerjanya dengan lebih baik.
Bagaimana jika sidebar tumpang tindih dengan konten utama?	Kamu bisa mengatur margin atau padding untuk konten utama agar tidak tumpang tindih dengan sidebar.

Semoga Bermanfaat dan sampai jumpa di artikel menarik lainnya!