Cara Membuat Kotak Pencarian di Blog

Search Box (Kotak Pencarian) pada sebuah website atau blog akan memudahkan pengguna untuk mencari apa yang mereka butuhkan. Ada banyak model search box yang bisa Anda gunakan saat ini, tetapi saya sarankan untuk menggunakan Search bar HTML CSS yang sederhana saja seperti google search box.

Pada kesempatan ini saya akan memberikan 2 versi HTML Search Box, jadi Anda bisa sesuaikan dengan tampilan blog Anda.

Langkah-Langkah Memasang Kotak Pencarian di Blog

1. Pilih Menu Layout > Tambahkan Gadget > pilih HTML/JavaScript
2. Copy salah satu kode berikut ini.

Kode 1:

<style>
form.example {margin:0}
form.example input[type=text] {padding: 10px;font-size: 17px;border: 1px solid grey;float: left;width: 80%;background: #f1f1f1;}
form.example button {float: left;width: 20%;padding: 10px;background: #2196F3;color: white;font-size: 17px;border: 1px solid grey;border-left: none;cursor: pointer;}
form.example button:hover {background: #0b7dda;}
form.example::after {content: "";clear: both;display: table;}
</style>
<form class="example" action="/search" method="get">
<input id='q' 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...'/>
<button type="submit"><i class="fa fa-search"></i></button>
</form>

Kode 2:

<style>
form.example {margin:0}
form.example input[type=text] {padding: 10px;font-size: 15px;border: 1px solid #f0f0f0;border-right: none;float: left;width: 85%;background: #f1f1f1;}
form.example button {float: left;width: 15%;padding:7px 10px;background: #f1f1f1;color: black;font-size: 20px;border: 1px solid #f0f0f0;border-left: none;cursor: pointer;}
form.example button:hover { background: #c00;color:#fff;}
form.example::after {content: "";clear: both; display: table;}
</style>
<form class="example" action="/search" method="get">
<input id='q' 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...'/>
<button type="submit"><i class="fa fa-search"></i></button>
</form>

Sekianlah pembahasan saya kali ini tentang Cara Membuat Kotak Pencarian di Blog, mudah-mudah bisa bermanfaat. Happy Blogging!