Kotak Pencarian Simple Responsive untuk Sidebar Blogger sanggup didapatkan di laman W3School. CB share yang aslinya dan yang dimodifikasi. Style 1 juga dimodifikasi di bab form dan inputnya semoga 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 instruksi berikut ini.

Style 1 Original


 Simple Responsive untuk Sidebar Blogger sanggup didapatkan di laman 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
 Simple Responsive untuk Sidebar Blogger sanggup didapatkan di laman Kotak Pencarian Simple Responsive untuk Sidebar Blogger

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.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours