Bagaimana cara membuat menu bar beserta search box, pada artikel kali ini saya akan menjelaskan bagaimana navbar yang kita buat terdapat tombol pencarian dengan icon kaca pembesar, yang nantinya jika di klik mengarah pada tampilan pencarian full responsive.

Pertama - tama masuk kelaman dashboard blogger, klik menu tema, selanjutnya pada menu temap klik pada tombol yang saya lingkari berwarna hitam.

Setelah tombol diklik lanjutkan dengan memilih edit HTML menu custom dashboard blogger.

Setelah masuk kedalam halaman edit HTML yang dipenuhi dengan begitu banyak kode-kode yang bisa bikin puyeng, kamu tidak perlu khawatir, dalam dashboard HTML blogger terdapat menu pencarian yang bisa kamu gunakan untuk menemukan letak script yang begitu banyak tersebut, dengan cara tekan CTRL - F besamaan dan masukan </head> pada kolom search:

Letakan baris Script CSS dibawah ini, tepat diatas kode </head> :

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

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

.active {
  background-color: #900C3F;
  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>

right:14%;
color: transparent;
}
.tombolbuka:hover {
  background: transparent;
  position: fixed;
}
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}
.overlay .closebtn {
  position: absolute;
  top: 35%;
  right: 80%;
  font-size: 60px;
  cursor: pointer;
  color: white;
  z-index: 101;
}
.overlay .closebtn:hover {
  color: #ccc;
}
.overlay input[type=text] {
  padding: 19px;
  font-size: 17px;
  border: dotted;
  float: left;
  width: 80%;
  background: white;
}
.overlay input[type=text]:hover {
  background: #f1f1f1;
}
.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: dotted;
  cursor: pointer;
}
.overlay button:hover {
  background: #bbb;
}</style>  
<style>
  
  .fa {

text-align: center;
  text-decoration: none;

}

.fa:hover {
    opacity: 0.7;
}

</style>

perhatikan Pada kode CSS, ciri-cirinya nya pada awal penulisan script dibuka dengan <style> dan diakhiri dengan </style>.

Setelah kode tadi di paste, sekarang memasukan kode HTML berikut dibawah </head> atau <body> paste script berikut :

<div class='topnav' id='myTopnav'>
  <a class='active' href='#'>Home</a>
  <a href='#news'>News</a>
  <a href='#contact'>Contact</a>
  <div class='#dropdown'>
    <button class='#dropbtn'>Menu
      <i class='fa fa-caret-down'/>
    </button>
    <div class='dropdown-content'>
      <a href='#linkmenu'>Category1</a>
      <a href='#'>Menu1</a>
      <a href='#'>Menu2</a>
    </div>
  </div> 
  <a href='#about'>About</a>
  
 
  
    <div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'><svg style='width:64px;height:64px' viewBox='0 0 24 24'>
    <path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='red'/>
</svg></span>
<div class='overlay-content'>
  
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...' size='25' type='text'/>
<button type='submit'><svg style='width:24px;height:24px' viewBox='0 0 20 20'>
    <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='currentColor'/>
  </svg></button>

</form>
</div>
</div>
  <button class='tombolbuka' onclick='openSearch()'><svg style='width:26px;height:26px' viewBox='0 0 24 24'>
    <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#fff'/>
</svg></button> 
    
   <a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'>☰</a>
</div>

Dan yang terakhir letakan kode berikut tepat diatas kode </body> :

Dan contohnya dapat di lihat pada halaman berikut pada DEMO cara membuat menu bar dengan search box

Papa Hiu | Tips dan Cerita Perjalanan Seru

Cari Blog Ini

Cara Membuat Menu Bar Dengan Search Box Di Blog Traveler

Bagaimana cara membuat menu bar beserta search box, pada artikel kali ini saya akan menjelaskan bagaimana navbar yang kita buat terdapat tombol pencarian dengan icon kaca pembesar, yang nantinya jika di klik mengarah pada tampilan pencarian full responsive.

Comments

Post a Comment