Cara membuat Navbar Keren Pada Website

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>

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;
  }

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.
Reaksi:

Post a Comment

0 Comments