Cara Membuat Sidebar
Assalamualaikum wr.wb
Agung Ramadhan
pengertian sidebar ini adalah bar di samping. Sidebar ini merpakan fitur dari theme yang dikenalkan sejak WordPress versi 2.2. Pada prinsipnya sidebar ini merupakan sebuah kolom vertikal untuk menampilkan informasi selain dari isi utama pada halaman situs tersebut.
Langkah-Langkah cara membuat sidebar seperti di bawah ini:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="font 9/css/all.min.css">
<link rel="stylesheet" type="text/css" href="style.cs"s>
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
<div class="container-fluid">
<a class="navbar-brand" href="#">SELAMAT DATANG ADMIN</a>
<form class="form-inline my-2 my-lg-0 ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<div class="icon ml-4">
<h5>
<i class="fas fa-envelope mr-3" data-toggle="tooltip" title="Pesan Masuk"></i>
<i class="fas fa-bell mr-3" data-toggle="tooltip" title="Notifikasi"></i>
<i class="fas fa-sign-out-alt mr-3" data-toggle="tooltip" title="Sign Out"></i>
</h5>
</div>
</div>
</nav>
<div class="row no-gutters">
<div class="col-md-2 bg-dark mt-2 pr-3 pt-4">
<ul class="nav flex-column ml-3 mb-5">
<li class="nav-item">
<a class="nav-link active" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-tachometer-alt mr-2"></i>Dashboard</a><hr class="bg-secondary">
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-graduation-cap mr-2"></i>Daftar Siswa</a><hr class="bg-secondary">
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-chalkboard-teacher mr-2"></i>Daftar Guru</a><hr class="bg-secondary">
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-calendar-alt mr-2"></i>Jadwal Pelajaran</a><hr class="bg-secondary">
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-paper-plane mr-2"></i>Daftar Nilai</a><hr class="bg-secondary">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"></a>
</li>
</ul>
</div>
<div class="col-md-10"></div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="text/javascript" src="admin.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
</body>
</html>
Komentar
Posting Komentar