Cara Membuat Kotak Pencarian di Blog - Solusi Menarik

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.

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!

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel