ASSALAMU'ALAIKUM WR. WB.
A. PENDAHULUAN
Selamat datang di blog saya. Kali ini saya akan memberitahu cara membuat navbar menggunakan html dan css. Untuk lebih jelasnya simak baik-baik artikel saya kali ini.
B. LATAR BELAKANG
Biasanya setiap website memerlukan sebuah navbar agar mempermudah informasi tentang website tersebut.
C. MAKSUD DAN TUJUAN
Agar bagi pemilik atau pengunjungnya dapat melakukan hal-hal tertentu yang masih terkait dengan navigasi blog.
D. ALAT DAN BAHAN
- Text Editor (saya menggunakan sublime text)
- Browser
E. PEMBAHASAN
Tampilan diatas hanya menggunakan html dan css, Berikut source kodenya :
Simpan source kode berikut di file index.html
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<div class="logo">
<img src="3.png" alt="ini logo" class="img-logo">
</div><h2 class="nama">IrfanBlogspot</h2>
<div class="menu">
<ul>
<li><a href="http://fans162.blogspot.com">Menu</a></li>
<li><a href="http://fans162.blogspot.com">About</a></li>
<li><a href="http://fans162.blogspot.com">Help</a></li>
<li><a href="http://fans162.blogspot.com">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Navbar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<div class="logo">
<img src="3.png" alt="ini logo" class="img-logo">
</div><h2 class="nama">IrfanBlogspot</h2>
<div class="menu">
<ul>
<li><a href="http://fans162.blogspot.com">Menu</a></li>
<li><a href="http://fans162.blogspot.com">About</a></li>
<li><a href="http://fans162.blogspot.com">Help</a></li>
<li><a href="http://fans162.blogspot.com">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Setelah itu kalian simpan script dibawah ini di file style.css
body{
padding: 0;
margin: 0;
font-family: sans-serif;
}
.navbar{
width: 100%;
height: 70px;
display: flex;
background-color: blue;
border-top: 4px solid aqua;
border-bottom: 4px solid aqua;
position: fixed;
z-index: 99;
border-radius: 11px;
box-shadow: 11px 0,4px 3px 1px black;
}
.logo {
width: 20%;
height: 100%;
background-color: transparent;
}
.img-logo {
height: 70%;
margin-left: 10px;
margin-top: 10px;
}
.menu {
width: 80%;
height: 100%;
}
.menu ul {
list-style-type: none;
float: right;
margin: 8px 0 8px 0;
padding-left: 0;
}
.menu ul li{
float: left;
color: orange;
padding: 27px;
margin-top: -10px;
}
.menu ul li a{
text-decoration: none;
color: white;
}
.menu ul li:hover{
background-color: darkturquoise;
border-bottom: 3px solid black;
border-right: 3px solid black;
border-radius: 11px;
}
.gambar {
width: 100%;
height: 100%;
}
.nama {
margin-top: 0;
position: center;
font-size: 4em;
color: white;
font-family: serif;
}
padding: 0;
margin: 0;
font-family: sans-serif;
}
.navbar{
width: 100%;
height: 70px;
display: flex;
background-color: blue;
border-top: 4px solid aqua;
border-bottom: 4px solid aqua;
position: fixed;
z-index: 99;
border-radius: 11px;
box-shadow: 11px 0,4px 3px 1px black;
}
.logo {
width: 20%;
height: 100%;
background-color: transparent;
}
.img-logo {
height: 70%;
margin-left: 10px;
margin-top: 10px;
}
.menu {
width: 80%;
height: 100%;
}
.menu ul {
list-style-type: none;
float: right;
margin: 8px 0 8px 0;
padding-left: 0;
}
.menu ul li{
float: left;
color: orange;
padding: 27px;
margin-top: -10px;
}
.menu ul li a{
text-decoration: none;
color: white;
}
.menu ul li:hover{
background-color: darkturquoise;
border-bottom: 3px solid black;
border-right: 3px solid black;
border-radius: 11px;
}
.gambar {
width: 100%;
height: 100%;
}
.nama {
margin-top: 0;
position: center;
font-size: 4em;
color: white;
font-family: serif;
}
F. KESIMPULAN
Dalam pembuatan navbar ini dibutuhkan pemahaman tentang html dan css agar dengan mudah membuatnya.
G. REFERENSI
w3school
H. PENUTUP
Sekian artikel dari saya, semoga bermanfaat dan terimakasih telah berkunjung di blog saya.
WASSALAMU'ALAIKUM WR. WB.
0 Comments