CARA MEMBUAT NAVIGASI BAR ( NAVBAR ) DI BLOGSPOT / WEBSITE

Desain blog yang menarik merupakan salah satu daya tarik tersendiri bagi pengunjung. Sebuah blog atau website tanpa menu navigasi akan terlihat hambar, untuk itu kali ini saya akan membuat sebuah tutorial cara membuat navbar (navigasi bar) atau menu navigasi (navigation menu) dropdown menu sederhana di blogspot menggunakan HTML dan CSS. Berikut adalah langkah-langkah membuat navigation bar yang dilengkapi dropdown menu:

LANGKAH-LANGKAH MEMBUAT MENU NAVIGASI BLOG

1. Buka menu desain dan pilih: Theme / Tema kemudian Edit HTML
2. Cari kode tag <header>  dan salin kedua kode CSS dan HTML dibawah ini diatas kode tag </header> ( salin kode css dan html diantara kedua tag header )
3. Sebelum menyimpan Theme / Tema kalian bisa klik preview / pratinjau untuk melihat hasilnya. Jika sudah yakin klik Save Theme / Simpan tema

CSS

<style type="text/css">

/*MENU NAVIGASI*/

#menu{background:#333;color:#eee;height:35px;border-bottom:4px solid #eeeded}

#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}

#menu ul{height:35px}

#menu li{float:left;display:inline;position:relative;font:bold 12px Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";text-shadow: 0 1px 0 grey;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}

#menu li:first-child{border-left: none}

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}

#menu li:hover > a,#menu li a:hover{background:#76ACFF}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}

#menu label span{font-size:12px;position:absolute;left:35px}

#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}

#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}

#menu li:hover ul.menus{display:block}

#menu a.home {background:#333;}

#menu a.sub{padding:0 27px 0 14px}

#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}

#menu ul.menus a:hover{background:#76ACFF;}

</style>

HTML

<nav id="menu">

<ul>

   <li><a href="#">MENU</a></li>

   <li><a href="#">MENU</a></li>

      <li><a class="sub" href="#">DROPDOWN MENU</a>

            <ul class="menus">

              <li><a href="#">MENU</a></li>

              <li><a href="#">MENU</a></li>

              <li><a href="#">MENU</a></li>

          </ul>

     </li>

</ul>

</nav>

• cara membuat navbar responsive
• membuat navbar bootstrap
• cara membuat menu dropdown di html
• cara membuat menu navigasi vertikal dengan css
• cara membuat menu navigasi dengan html
• membuat menu sidebar dengan bootstrap
• membuat navigasi menu dengan css
• menu navigasi css keren

Untuk warna background atau daftar menu dapat dirubah sesuai keinginan masing-masing. Silahkan ubah css style dan htmlnya sesuai kebutuhan. Jika ada pertanyaan silahkan ajukan dikolom komentar dan terima kasih sudah berkunjung di blog saya semoga dapat membantu teman-teman yang sedang mencari tutorial tentang membuat menu navigasi blognya.

Share this post