CARA MEMBUAT MENU NAVIGASI BLOGGER RESPONSIVE DROPDOWN YANG BENAR DAN MUDAH

CARA MEMBUAT MENU NAVIGASI BLOGGER RESPONSIVE DROPDOWN YANG BENAR DAN MUDAH

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

Beri Komentar ya...

2 Comments

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

    ReplyDelete
    Replies
    1. 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

      Delete

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik