Sidebar

Langkah 1: Membuat Struktur HTML Dasar

Mulailah dengan membuat struktur dasar HTML untuk halaman Anda:

<!DOCTYPE html>
<html>
<head>
    <title>Sidebar Tutorial</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="sidebar">
        <!-- Isi sidebar di sini -->
    </div>
    <div class="content">
        <!-- Konten utama halaman di sini -->
    </div>
</body>
</html>

Langkah 2: Membuat CSS Untuk Sidebar

Buat file CSS terpisah (misalnya, style.css) untuk mengatur tampilan sidebar:

/* Reset beberapa gaya default */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Stil sidebar */
.sidebar {
    width: 250px;
    background-color: #333;
    color: #fff;
    padding: 20px;
}

/* Stil konten utama */
.content {
    margin-left: 270px; /* Sesuaikan dengan lebar sidebar */
    padding: 20px;
}

Langkah 3: Tambahkan Isi ke Sidebar

Anda dapat menambahkan elemen-elemen seperti menu navigasi atau widget lainnya ke dalam elemen .sidebar.

Contoh menu navigasi sederhana:

<div class="sidebar">
    <h2>Menu</h2>
    <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Tentang Kami</a></li>
        <li><a href="#">Layanan</a></li>
        <li><a href="#">Kontak</a></li>
    </ul>
</div>

Langkah 4: Lihat Hasilnya

Buka halaman HTML Anda dalam peramban web untuk melihat sidebar yang telah Anda buat.

Ini hanya contoh dasar, Anda dapat mengkustomisasikan tampilan dan kontennya sesuai kebutuhan Anda. Semoga tutorial ini membantu Anda dalam membuat sidebar HTML!

PREVIOUS
NEXT