CARA MEMBUAT MENU NAVIGASI BLOGGER RESPONSIVE DROPDOWN YANG BENAR DAN MUDAH

bysufyan Yaan -
Kode dibawah berikut bisa sobat terapkan pada tema tema blogger yang lebih lama seperti: simple, awsome, perjalanan dll, juga bisa diterapkan dengan mudah kepada template terbaru blogger dengan sama mudahnya seperti: Contempo, Soho, Emporio dll.
menu navigasi ini responsive dan dilengkapi dropdown
Cara menerapkannya sama seperti biasa:
  1. Masuk kepengaturan blogger
  2. Pilih Tema
  3. Pilih tombol edit HTML
  4. Cari kode kode utama: </header>, </head> dan </body> saya tandai dengan huruf berwarna merah untuk mempermudah panduan.
Kalau sudah siap perhatikan kode dibawah ini yang saya sorot dengan warna warna: Biru,Kuning, Merah

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}

 .topnav {
  overflow: hidden;
  background-color: #6495ED;
}

 .topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

 .active {
  background-color: #6495ED;
  color: white;
}

 .topnav .icon {
  display: none;
}

 .dropdown {
  float: left;
  overflow: hidden;
}

 .dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

 .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

 .dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

 .topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

 .dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

 .dropdown:hover .dropdown-content {
  display: block;
}

 @media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

 @media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
</head>
<body>

 <div class="topnav" id="myTopnav">
  <a href="#home" class="active">Beranda</a>
  <a href="#news">Berita</a>
  <a href="#contact">Hubungi</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Menu Navigasi responsive dengan "dropdown"</h2>
  <p>Untuk menguji menu navigasi ini responsive atau tidak, coba periksa halaman melalui hape dan laptop atau tablet sobat.</p>
  <p>Tentu saja tekan tombol "Dropdown" yang muncul pada barisan menu untuk memunculkan menu menu dropdown tersebut.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

 </body>
</html>


  1. Kode kode yang saya sorot warna biru seluruhnya harus diletakan diatas kode </head>
  2. Kode kode yang saya soroti warna kuning seluruhnya harus diletakan diatas kode </header> bukan </head> ya. Cari saja dengan menekan ctrl+c pada keyboard laptop dan letakan seluruh kode yang saya sebutkan tadi diatas atau dibawah kode tersebut.
  3. Kode kode yang saya sorot warna merah seluruhnya harus diletakan diatas kode </body>
Save template. 
Jika sobat ada yang mencobanya dan terjadi error, atau belum mengerti bagaimana memasang link pada menu, jangan sungkan sungkan bertanya kepada kami ya...

Untuk membuktikannya silahkan lihat DEMO


www.editblogtema.net
Tags

3 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. riyopediaFebruari 13, 2019

    cara membuat menu navikasi yg ada gambarnya gmn mas/? seperti anvigasi blog ini < fitur >

    BalasHapus
    Balasan
    1. sufyan YaanFebruari 13, 2019

      Itu namanya mega menu fungsinya seperti menu biasa saja.

      Saya sudah membuat toturialnya beberapa bulan lalu ketik saja mega menu di kolom pencarian blog ini atau ini linknya: https://www.editblogtema.net/2018/10/cara-membuat-navigasi-mega-menu-di.html?m=1

      Hapus
  2. AnonimFebruari 08, 2023

    Parabens!!!!! Resolvido.

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak