Membuat Search Form Show-Hide dengan event onClick

Membuat Search Form Show-Hide onClick Event - Assalaamu'alaikum sobat Osa. Melihat ada yang baru di tampilan blog Osa tidak? Perhatikan bagian search form yang dulunya ada di bawah header atau di samping header? Yaps, sebelumnya disitu ada search form bawaan template premium Osa ini. Tapi sudah Osa tanggalkan 3hari yang lalu dengan alasan sedikit kurang responsive.

Dan beberapa waktu lalu Osa menemukan search form yang menarik seperti di blog kompiajaib. Awalnya Osa ingin mencontek langsung seperti punyanya mas Adhy Suryadi ini, namun karena menggunakan AMP HTML Osa jadi kebingungan mana saja yang harus Osa copy. Hehehe. Kalau pada template AMP mas Adhy yang kita lihat biasanya pada CSS style akan terlihat 1 baris langsung. Jadi bingung.

Sebelum menerapkan tutorial Osa di blog sobat, silahkan backup terlebih dahulu templatenya. Dan pastikan tidak ada kode dan id yang sama dengan kode-kode Osa ini. Untuk memastikan kode Osa bekerja dengan baik, sobat hapus terlebih dahulu semua CSS untuk search form sobat.

Search form show-hide ini Osa dapatkan di blog bungfrangki. Lebih tepatnya di template Mostheme. Kalau sobat juga tertarik membuatnya, ini dia kode-kode dan script yang sobat butuhkan.

Copy CSS dibawah ini di atas </style>

/* CSS Fixed Search Button */
#right-header{background:#4499f0;width:99px;height:58px;display:inline-block;float:right;position:absolute;right:0;top:0;bottom:0;z-index:9999}
#search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow 0.3s ease-in-out;-moz-animation:shownow 0.3s ease-in-out;animation:shownow 0.3s ease-in-out}
@keyframes shownow{0%{transform:scale(0.9)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
#search-wrap{clear:both;width:75%;margin:0 auto;padding:0;display:block;overflow:hidden}
#search{border-bottom:3px solid rgba(63,63,63,.8)}
#searchform{color:#111;width:100%;margin:0 auto;overflow:hidden;position:relative;}
.search-button,.search-button:hover{clear:both;background:none;border:none;color:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:23px;cursor:pointer;position:absolute;top:5px;right:10px;font-weight:700}
.search-button:active{border:none;outline:none;background:none;}
#search-form{background-color:transparent;width:100%;height:57px;line-height:57px;padding:0 60px 0 20px;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:25px;color:#fff!important}
#search-form{-webkit-box-sizing:border-box}
#search-form:focus{border:none;outline:0;color:#fff;}
#searchform:focus{border:none;outline:0;color:#3f3f3f}
#box{margin:0 auto;display:none;padding:60px 0 0;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(0,0,0,.94);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s;}
#hide span.smallbutton{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;border-radius:99em;border:3px solid #fff;float:right;overflow:hidden;display:block}
#hide span.smallbutton:hover{color:#eee;border-color:#eee}
#box p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase}
.search-icon span{font-weight:normal;width:45px; height:60px;line-height:60px;position:absolute;top:0;right:20px;cursor:pointer;font-size:22px;color:#fff}

Cari kode </body> atau scroll down sampai mentok ke bawah (biasanya berada paling bawah dari sebuah template). Dan letakkan kode dibawah ini tepat di atas </body>

<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<div id='hide'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></span></div>
<div id='search-wrap'>
<p>Start typing and press Enter to search</p>
<div id='search'>
  <form action='/search' id='searchform'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Search here....' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>
  </div>
  </div>
</div>
</div>

Langkah selanjutnya adalah sobat membutuhkan icon search untuk memanggil form searchnya. Copy kode dibawah dan letakkan sesuai keinginan sobat. Kalau Osa lebih suka meletakkan di sebelah kanan menu navigasi. Karena memang disitulah tempat yang paling cocok. Hehehe.

<div class='right-header' id='right-header'>
<div class='search-icon'>
<div id='show'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-search'/></span></div>
</div>
  </div>

Search form ini menggunakan FontAwesome untuk membuat Search-icon. Jadi pastikan juga sudah terpasang FontAwesome di template sobat.

Save template dan lihat hasilnya. Untuk Demo bisa coba di blog Osa ini.

Kalau sobat mengalami kesulitan silahkan berbincang dengan Osa di kolom komentar. Dan itulah Membuat Search Form Show-Hide dengan event onClick. Semoga bermanfaat.