CARA MEMBUAT NAVIGASI MENU DENGAN KOTAK PENCARIAN DI UJUNG KANANNYA

bysufyan Yaan -



Jika sebelumnya kami telah memposting teknik membuat menu pencarian full screen atau layar penuh, maka kali ini kita akan menggabungkannya dengan navigasi menu sehingga menghasilkan sebuah navigasi menu yang dilengkapi dengan tombol pencarian kaca pembesar.
menu pencarian full screen
menu  pencarian full screen

Gambar navigasi responsive dengan tombol pencarian
Perlu sobat camkan, tutorial ini hanyalah sebagai pembelajaran dan pelatihan untuk memahami bagaimana HTML bekerja membentuk fisik dan wajah sebuah sebuah halaman blog.

Untuk melihat "Demo" Jangan lupa klik Run terlebih dahulu agar kolom sebelah kanan menampilkan demo daripada hasilnya. Melalui alat w3school sobat bisa mengedit kode kode yang sudah ada dan menyesuaikannya dengan kebutuhan desain sobat
sendiri.Untuk mengetahui proses pembuatannya silahkan pelajari DEMO dibawah ini:
Pelajari DEMO

 Kodenya adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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 {
  font-family: Arial;
}

 * {
  box-sizing: border-box;
}

 .openBtn {
  background: transparent;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}

 .openBtn:hover {
  background: #fff;
}

 .overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #ccc;
  background-color: #6495ED;
}

 .overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

 .overlay .closebtn {
  position: absolute;
  top: 20px;
  left: 45px;
  font-size: 60px;
  cursor: pointer;
  color: ccc;
}

 .overlay .closebtn:hover {
  color: #fff;
}

 .overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: right;
  width: 80%;
  background: ccc;
}

 .overlay input[type=text]:hover {
  background: #ccc;
}

 .overlay button {
  float: right;
  width: 20%;
  padding: 15px;
  background: #fff;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

 .overlay button:hover {
  background: #000;
}
</style>
<style>
body {font-family: Arial, Helvetica, sans-serif;}

 .navbar {
  width: 100%;
  background-color: background:#0F466E;
background:-webkit-linear-gradient(right,#F0FFFF 0%,#6495ED 75%);
  overflow: auto;
}

 .navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

 .navbar a:hover {
  background-color: #000;
}

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

 @media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}
</style>
<body>

 <h2>Navigasi menu responsive dengan kotak pencarian</h2>
<p>Cobalah robah ukuran layar untuk melihat hasilnya.</p>

 <div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i>Beranda</a>
  <a href="#"><i class="fas fa-atom"></i>Tekno</a>
  <a href="#"><i class="fa fa-fw fa-envelope"></i> perihal</a>
  <a href="#"><i class="fa fa-fw fa-user"></i> Login</a><button class="openBtn" onclick="openSearch()"><i class="fas fa-search fa-1x"></i></button>
</div>
<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>
<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>
<p>cara diatas dpat diterapkan dengan mudah ke template bawaan blogger</p>
<script>
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}

 function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
</script>
</body>
</html>

Untuk melihat jasilnyabSobat bisa juga melakukan percobaan dengan mengkopi kode ini dan pastekan ke halaman postingan baru dengan memilih opsi HTML daripada compose.

Cara pemasangan:

  1. Kode yang saya sorot warna merah harus diletakan diatas kode </head>
  2. Kode yang saya sorot kuning harus diletakan diatas kode </header>
  3. Kode yang saya sorot hijau harus diletakan diatas kode </body>
Cara menrapkannya seperti biasa:
  1. Masuk kepengaturan blogger
  2. Pilih tema
  3. Pilih edit HTML
Didalam halaman HTML blogger carilah kode kode :  </head>, </header> dan </body>
Lalu terapkan sesuai dengan petunjuk. Jika ada kesulitan jangan sungkan bertanya. Tulisan ini hanya ditulis melalui ponsel dengan beberapa keterbatasannya, mohon dimaklumi jika terdapat banyak kesalahan penulisan, terutama kode kodenya...

Next time saya akan memberikan trik membuat navigasi menu mirip viomagz buatan Mas Sugeng namun dengan teknik pembuatan yang jauh lebih sederhana. Support kami ya...


www.editblogtema.net
Tags

4 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Djangkaru BumiFebruari 25, 2019

    Biasanya model ini kalau dilihat lewat versi mobil, posisinya ngaco. Tapi kode ini sangat baik sekali, benar-benar responsive.

    BalasHapus
    Balasan
    1. sufyan YaanFebruari 25, 2019

      Sebenarnya ini hanya contoh, karena saya sedang membuat hampir semua model dengan struktur kode yang berbeda.

      Tidak terbatas navigasi, kami juga membuat tema tema meniru model model yang dirasa menarik. Tapi tentu saja struktur kodenya berbeda dengan aslinya he he he

      Hapus
  2. Bang DayFebruari 25, 2019

    Om gak puyeng liat kode2 begitu ? hehehe

    BalasHapus
    Balasan
    1. sufyan YaanFebruari 25, 2019

      Gak juga soalnya sudah hafal tapi hafalnya diluar kepala ha ha ha

      Hapus
Lebih baru Lebih lama

Formulir Kontak