Cara Membuat Kotak Pencarian di Blog
Daftar Isi
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/JavaScript2. 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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' 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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' 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!