cara Modifikasi search box dengan auto hidden terbaru 2016

Salah satu elemen yang menurut saya wajib dimiliki oleh sebuah blog adalah kotak pencari.  Karena dengan search box ini pengunjung menjadi lebih mudah dalam melakukan pencarian artikel yang terdapat pada blog yang dikunjunginya.  Meskipun sudah ada elemen lainnya seperti menu tab, category, yang terpasang tetapi akan lebih lengkap lagi bila terpasang pula search box atau kotak pencarian.

Pada dasarnya kode untuk membuat search box adalah seperti ini :

<form action="http://NAMABLOGANDA.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Dari kode di atas tadi, bisa kita modifikasi agar lebih enak dipandang mata dengan memasukkan text di dalam kotak form, seperti “Cari artikel, Search, dan lain-lain”.  Text yang kita pasang, agar lebih atraktif kita buat auto hide, artinya apabila text tersebut diklik maka tulisan akan hilang dan akan muncul kembali bila klik di tempat yang kosong.

Selain itu untuk mempermanis penampilan search box, bisa ditambahkan pula kode css3 border radius yang bakal membuat garis jadi lengkung.

Ayo kita mulai memodifikasi kotak pencarian :

1. Tambahkan gadget baru (add a gadget)
2. pilih HTML/JavaScript
3. Copy paste kode ini ke dalam gadget tadi lalu save.

Ini kode modifikasi kotak pencarian / Search box yang harus anda copy paste :

<style>
.cariform {
background: #111111;
background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#555555)); /* CSS gradient */
background: -moz-linear-gradient(top, #111111, #555555); /* CSS gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie8 */
display: inline-block;
zoom: 1; /* hack untuk ie7 */
*display: inline;
border: solid 1px #555555;
padding: 3px 5px;
-webkit-border-radius: 20px; /* rounded corner */
-moz-border-radius: 20px; /* rounded corner */
border-radius: 20px; /* rounded corner */
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
}
.cariform input {
font: normal 12px Arial, Helvetica, sans-serif;
}
.carifield {
background: #ededed;
padding: 6px 6px 6px 8px;
width: 200px;
border: solid 1px #222222;
outline: none;
-webkit-border-radius: 20px; /* rounded corner */
-moz-border-radius: 20px; /* rounded corner */
border-radius: 20px; /* rounded corner */
-moz-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
-webkit-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
}
.caributton {
color: #fff;
border: solid 1px #b80000;
font-size: 11px;
height: 28px;
width: 55px;
text-shadow: 0 1px 1px #222222; /* CSS text shadow */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #ff0000;
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#b80000)); /* CSS gradient */
background: -moz-linear-gradient(top, #ff0000, #b80000); /* CSS gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie8 */
}
</style>
<form action="http://NAMABLOGANDA.blogspot.com/search" class="cariform " method="get">
<input class="carifield" onblur="if (this.value == '') {this.value = 'Cari artikel...';}" onfocus="if (this.value == 'Cari artikel...') {this.value = '';}" type="text" value="Cari artikel..." /><input class="caributton" type="button" value="Search" /></form>

Keterangan;

Width = 200px yang berwarna merah adalah lebar kotak form, bisa di ganti sesuai yang anda inginkan.

Height = 28px yang berwarna hijau adalah tinggi tombol cari/search, bisa dig anti sesuai yang anda inginkan.

Width = 55px yang berwarna kuning adalah lebar tombol cari/search, bisa dig anti sesuai yang anda inginkan.

NAMABLOGANDA bisa anda ganti sesuai nama blog anda.

Tweet