Cara Membuat Kotak Tombol Pencarian dengan HTML dan CSS

Kotak pencarian atau dalam kata istilahnya adalah search box untuk sebuah website atau blog sangat berperan penting agar membuat situs kamu menjadi user frendly.

Apa maksud kata " User Frendly " singkat kata pengertiannya adalah mudah untuk digunakan oleh manusia, bukan untuk mesin robot.

Jadi apabila blog tanpa ada kotak pencarian sangat disayangkan karena sudah mengurangi nilai kemudahan untuk orang lain yang membaca artikel kamu.

Apabila kamu seorang pengelola blog, tema yang akan kamu pilih harus di perhatikan dari mulai kemudahan navigasi link menu dan juga itu tadi, kotak pencarian untuk memudahkan orang lain mencari artikel lainnya.

Dalam halaman ini, kami akan memberikan lagi tutorial yang berkaitan dengan desain template blogger, sebelumnya juga kami sudah membahas tutorial membuat menu dropdown di blogger tapi cara sebelumnya tidak menggunakan kotak pencarian.
Baca juga — Pelajari tentang membuat menu dropdown di template blogspot. Maka artikel ini melanjutkan pembahas masalah pembuatan kotak pencarian menggunakan kode HTML dan CSS juga.

Membuat Search Box dengan CSS dan HTML

Harus diperhatikan, sebelum menuju langkah ini, kamu harus sudah memiliki bagian area peletakan kotak pencarian ini. Sebagai bahan contoh kotak pencarian itu bergabung dengan area menu dropdown.

Salin kode HTML dibawah ini.

<div class='search-icon'>
<a href='#searchfs'><i class='material-icons'>search</i></a>
</div>
<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
<form action='/search' id='search-form' method='get'>
<input name='q' placeholder='isi tulisan...' type='search' value=''/>
<input name='max-results' type='hidden' value='7'/>
</form>
</div>

Keterangan :

• Warna merah yang saya jadikan tanda diatas adalah bagian-bagian yang bisa kamu ubah sesuai selera.
• <i class='material-icons'>search</i> adalah kode icon search, disana saya menggunakan icon marterial. Bisa juga kamu menganti icon FontAwesome atau SVG.
• × adalah kode icon tutup, silahkan ubah sesuai selera kamu.
• Isi tulisan.... - Adalah tulisan yang tampil dalam kotak pencarian.
• Value='7' - Jumlah artikel yang akan tampil jika digunakan kotak pencarian.

Baca juga : Cara Memasang Icon SVG di Blog

Dalam langkah meletakan kode HTML kotak pencarian diatas, kamu harus meletakannya dibagian kode penutup </nav> atau </menu> sesuai kode class pemanggil kode area menu dropdown.

Sehingga menjadi seperti dibawah ini untuk susunan keseluruhan kode HTML nya.

<nav id='cssmenu'>
daftar menudropdwon
</nav>
<div class='search-icon'>
<a href='#searchfs'><i class='material-icons'>search</i></a>
</div>
<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
<form action='/search' id='search-form' method='get'>
<input name='q' placeholder='type to search' type='search' value=''/>
<input name='max-results' type='hidden' value='7'/>
</form>
</div>

Hanya contoh kode saja untuk area yang saya beri tanda merah diatas. jadi untuk susunan kode HTML nya kurang lebih seperti itu gambaranya.

Membuat Search Box dengan CSS

Seperti biasa, kita beri keindahan tampilan search box nya menggunakan kode CSS.

Salin lagi kode CSS dibawah ini.

/* SEARCH FORM */
.search-icon {
position: absolute; - POSISI MELAYANG KEATAS
top: 18px; - UKURAN KETINGGIAN POSISI ICON SEARCH
right: 0px; - POSISI KANAN ICON TIDAK ADA
font-size: 19px; - UKURAN HURUF / ICON SEARCH
}
.search-icon a {
color: #444444; - KODE WARNA ICON
}
#searchfs {
position: fixed; - POSISI MELAYANG DIATAS, HANYA SAJA SEDIKIT BERBEDA KARENA INI MENGGIKUTI
z-index:9999; - KENAMPAKAN
top: 0px;
left: 0px;
width: 100%; - LEBAR AREA PENCARIAN
height: 100%; - TINGGI AREA PENCARIAN
background-color: rgba(0, 0, 0, 0.8); - WARNA LATAR PENCARIAN
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
opacity: 0;
}
#searchfs.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
z-index: 9999;
}
#searchfs input[type="search"] {
position: absolute;
top: 50%;
left: 0;
margin-top: -51px;
width: 70%;
margin-left: 15%;
color: rgb(255, 255, 255);
background: transparent;
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 5px;
font-size: 40px;
text-align: center;
outline: none;
padding: 10px;
}
#searchfs .close {
position: fixed; - ICON PENUTUP MELAYANG DIATAS
top: 20px;
right: 30px;
color: #fff;
background-color: transparent;
opacity: 0.8; - WARNA SEDIKIT DI SAMARKAN
font-size: 40px; - UKURAN ICON
border: none; - GARIS TIDAK ADA
outline: none;
}
#searchfs .close:hover {
cursor: pointer;
}

Lalu letakan kode CSS diatas, tepat dibagian kode penutup ]]></b:skin> atau </style>

Untuk membuat icon searchnya menjadi responsive, maka kita perlu menambah kode CSS dibawah ini.

/* MEDIA QUERY */
@media only screen and (max-width:1080px){
.search-icon {
right: 30px;
}
}
@media only screen and (max-width:800px){
.search-icon {
right: 24px;
}
}
@media only screen and (max-width:640px){
.search-icon {
right: 18px;
}
}
@media only screen and (max-width:480px){
.search-icon {
right: 15px;
}
}
@media only screen and (max-width:320px){
.search-icon {
right: 13px;
}
}

Nah bagi kamu yang ingin menggunakan icon marterial seperti milik saya, bisa gunakan kode @font-face dibawah ini.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

Simpan kode diatas, dibagian kode atas </style>

Memasang Script Kotak Pencarian di Blogspot

Tambahkan kode sricpt dibawah ini dibagian atas kode </body>

<script>
//<![CDATA[
// search form
$(function(){$('a[href="#searchfs"]').on("click",function(e){e.preventDefault(),$("#searchfs").addClass("open"),$('#searchfs > form > input[type="search"]').focus()}),$("#searchfs, #searchfs button.close").on("click keyup",function(e){e.target!=this&&"close"!=e.target.className&&27!=e.keyCode||$(this).removeClass("open")})});
//]]>
</script>

Contoh Halaman

Kesimpulan

Demikian tutorial yang dapat kami sampaikan tentang masalah pembuatan kotak tombol pencarian menggunakan HTML dan CSS. Jika ada yang kurang kamu pahami dengan langkah diatas, jangan ragu untuk menulis komentar dibawah ini.

Berbagi :