Kotak Pencarian Simple Responsive untuk Sidebar Blogger

Kotak Pencarian Simple Responsive untuk Sidebar Blogger

Kotak Pencarian Simple Responsive untuk Sidebar Blogger bisa didapatkan di laman W3School. CB share yang aslinya dan yang dimodifikasi. Style 1 juga dimodifikasi di bagian form dan inputnya biar berfungsi di Blogger.

Kode Simple Search Box Responsife Mobile-Friendly for Blogger ini, Anda tinggal pasang aja di sidebar blog Anda, dengan cara:

1. Tambahkan gadget > pilih HTML/JavaScript
2. Copas salah satu kode berikut ini.

Style 1 Original


Kotak Pencarian Simple Responsive untuk Sidebar Blogger

Kodenya:

<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>

Style 2 Modifikasi
Kotak Pencarian Simple Responsive

Kodenya:

<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>

Demikian Kotak Pencarian Simple Responsive untuk Sidebar Blogger dan cara memasangnya. Good Luck & Happy Blogging! (www.contohblog.com).*

Thanks for reading Kotak Pencarian Simple Responsive untuk Sidebar Blogger | Labels: Desain Blog
0 Komentar untuk "Kotak Pencarian Simple Responsive untuk Sidebar Blogger"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *