ads here

CARA MEMBUAT NAVIGASI MENU DENGAN KOTAK PENCARIAN DI UJUNG KANANNYA

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 navigasi ini responsive namun tidak bersifat "hidden"
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


Comments

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

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

      Delete
  2. Om gak puyeng liat kode2 begitu ? hehehe

    ReplyDelete
    Replies
    1. Gak juga soalnya sudah hafal tapi hafalnya diluar kepala ha ha ha

      Delete

Post a Comment

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