Ini Solusinya Cara Membuat Menu Search Box Show Hide Pada Blogger

Halo sahabat webmuna dimanapun anda berada, pada kesempatan kali ini saya akan membagi sebuah tutorial tentang bagaimana membuat menu search box show hide pada blogger atau website.

Jika sobat ingin mencoba membuat menu search box seperti pada contoh blog ini lakukan atau ikuti tutorial dibawah ini.

CARA MEMBUAT MENU SEARCH BOX SHOW HIDE PADA BLOG

LANGKAH #1
Untuk langkah pertama sama seperti edit tema blog yang lain yaitu login dulu kedalam blogger selanjutnya pilih Tema / Tempalte - Edit HTML

LANGKAH #2
Selanjutnya cari kode ]]></b:skin> tekan ( Ctrl + F ) untuk memudahkan pencarian.

Jika sudah ketemu Copy kode CSS dibawah ini kemudian Paste atau letakkan tepat di atas kode ]]></b:skin>.

#cari {display:none;float:left;width:100%;height:62px;padding-left:25px;padding-right:10px;z-index:9999;background:#f4f4f4;}
#mita {display:block;width:88%;border:0;outline:none;height:50px;line-height:50px;font-size:1.5em;font-weight:700;color:#666;padding:0;background: #f1f1f1;}
#searchsubmit {display:block;float:right;margin-top:6px;background:none;color:#777;border:0;outline:none;cursor:pointer;font-size: 18px;}

LANGKAH #3
Jika sudah selesai selanjutnya meletakkan icon tombol menu pencarian atau menu search box. Biasanya icon tombol menu search box berada pada bagian sebelah kanan menu navigasi.

Selanjutnya Copy kode HTML icon tombol menu search box dibawah ini kemudian Paste atau letakkan dalam class menu navigasi sobat.

<li><a href="#" id="klik-cari"><i class="fa fa-search fa-lg"></i></a></li>

LANGKAH #4
Jika sudah selesai selanjutnya meletakkan kode HTML menu pencarian muncul saat di klik icon search.

<div id="cari" class="clearfix"> 
	<form id="searchform" method="get" action="searchpage.php"> 
		<button type="submit" id="searchsubmit" class="fa fa-search fa-2x"></button> 
		<input type="search" name="mita" id="mita" placeholder="Kata kunci..." autocomplete="off"/> 
	</form> 
</div>

LANGKAH #5
Selanjutnya memasukkan kode Jquery untuk menjalankan fungsi show hide nya. caranya cari kode </body>

Jika sudah ketemu Copy kode Jquery dibawah ini kemudian Paste atau letakkan kode tersebut tepat di atas kode </body>

<script type="text/javascript">
$(function(){
  var $searchlink = $('#klik-cari i');
  var $cari  = $('#cari');
  
  $('.top-menu ul li a').on('click', function(e){
    e.preventDefault();
    
    if($(this).attr('id') == 'klik-cari') {
      if(!$cari.is(":visible")) { 
        // if invisible we switch the icon to appear collapsable
        $searchlink.removeClass('fa-search').addClass('fa-search-minus');
      } else {
        // if visible we switch the icon to appear as a toggle
        $searchlink.removeClass('fa-search-minus').addClass('fa-search');
      }
      
      $cari.slideToggle(300, function(){
        // callback after search bar animation
      });
    }
  });
  
  $('#searchform').submit(function(e){
    e.preventDefault(); // stop form submission
  });
});
</script>

LANGKAH #6
Klik menu SIMPAN untuk menyimpan template kemudian lihat hasilnya.

Jika tidak berjalan dengan sempurna dan sobat ingin mengembalikan tekan Ctrl + Z untuk menu undo atau kembali kesemula.

Demikianlah sedikit penjelasan dari saya tentang bagaimana membuat menu search box show hide pada blogger semoga bermanfaat dan dapat membantu.

Selamat Mencoba...