Cara membuat Kotak Search Drop Down Pada Navigasi Blogger

Selamat pagi sobat blogger kali ini saya akan share Cara membuat Kotak Search Drop Down Pada Navigasi Blogger, Sebelum saya posting ini saya telah mencoba di blog saya dan ternyata berhasil.

sebenarnya membuat kotak search drop down telah lama saya cari di beberpa artikel di blogger dan wordpress dan akhirnya tutorialnya saya dapatkan dan saya akan share kembali kepada sobat blogger sekalian, dan saya akan menempatkan link dibawah sebagai sumber tutorial ini.


Langsung saja ikuti tutorial dibawah ini.

Langkah 1# Karena kita akan menggunakan ikon Font Awesome di tutorial ini, kita perlu menginstal Awesome Font Awesome.

Buka halaman Awesome dan masukkan email Anda. Mereka akan mengirimkan kode sematan yang mirip dengan kode dibawah ini.
<script src="https://use.fontawesome.com/7aa390f702.js"></script>
letakkan kode yang sobat dapat tepat dibawah <head> di template Anda (Tema> Edit HTML).

Langkah 2# Jangan Tututp pengeditan template, Berikutnya cari kode id = 'navigationbar' atau id = 'navigation' dan tempatkan kode dibawah ini tepat di bawah <ul>  pada, biasanya pas dibawah id = navigation'
<li class="searchicon" id="searchicon"><i class="fa fa-search"></i></li>
Langkah 3# Dalam div navigasi tapi di bawah daftar menu yang telah Anda buat, Tempatkan kode dibawah ini.
<div class='clear' id='searchbar'>
<form expr:action='data:blog.searchUrl' id='searchform' method='get'>
<input id='searchBox' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...' vinput=''/> <input id='searchButton' type='submit' value='Go'/>
</form>
</div>
Langkah 4# Berikutnya kita akan menambahkan kode CSS untuk menata menu, tempat kode CSS dibawah ini tepat di atas </b:skin>  
/* Start dropdown navigation - XOmisse */
#searchbar {
  display: none;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  height: 50px;
  background: #fff;
  position: absolute;
  overflow: hidden;
  z-index: 9999;
}
#searchicon {
  height: 30px;
  line-height: 30px;
  width: 30px;
  color: #333;
  text-align: center;
  float: right;
  cursor: pointer;
}
#searchicon:hover {
  color: #999999;
}
#searchBox {
-webkit-appearance: none;
border: 0px;
background: #FFF;
padding: 10px;
text-transform: uppercase;
width: 80%;
}
#searchButton {
  width: 10%;
  padding: 10px 20px;
  background: #333333;
  color: #ffffff;
  border: 0;
  outline: none;
  cursor: pointer;
}
/* End dropdown navigation - XOmisse */

Langkah 5# Tempat kode dibawah ini tepat di atas </body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
  var $searchicon = $('#searchicon i');
  var $searchbar  = $('#searchbar');
 
  $('#navigationbar ul li').on('click', function(e){
    if($(this).attr('id') == 'searchicon') {
      if(!$searchbar.is(":visible")) {
        // if invisible we switch the icon to appear collapsable
        $searchicon.removeClass('fa-search').addClass('fa-search-minus');
      }
        else {
        // if visible we switch the icon to appear as a toggle
        $searchicon.removeClass('fa-search-minus').addClass('fa-search');
      }
     
      $searchbar.slideToggle(300, function(){
        // callback after search bar animation
      });
    }
  });
 
  $('#searchform').submit(function(e){
    e.preventDefault(); // stop form submission
  });
});
</script>
Sekarang sobat bisa melihat hasilnya, semoga tutorial di atas berhasil terpasang di menu navigasi blog sobat. Jangan lupa share dan Follow Kami.

Artikel From : xomisse.com


SUBSCRIBE TO OUR NEWSLETTER

close