Cara Membuat Kotak Pencarian di Blog - Solusi Menarik

Advertisement 970x90

Cara Membuat Kotak Pencarian di Blog

Gunawan
Desember 21, 2018

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.

Cara Membuat Kotak Pencarian di Blog
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.

Cara Membuat Kotak Pencarian di Blog
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>
Cara Membuat Kotak Pencarian di Blog
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!