Search Box Dengan Efek Focus Hijau

Kali ini saya akan post tentang Search Box, search box ini hampir sama persis dengan search box yang saya gunakan sekarang tepatnya di sebelah kanan atas blog ini. Namun pada dasarnya sama saja dengan search box lainnya, hanya saja saya beri sedikit sentuhan box shadow untuk memperindah tampilannya. Search Box ini sangat cocok digunakan pada blog yang berlatar belakang gelap karena terdapat efek box-shadow berwarna hijau namun jika digunakan pada background berwarna cerah pun tetap lumayan bagus. Namun jangan lupa untuk membackup template sebelum melakukannya.

Langsung saja di bawah ini cara memasang Search Box di blog :

Buka  Template sobat lanjutkan  Edit HTML, kemudian beri tanda check Expand Template Widget.  Lalu cari kode ]]></b:skin> dan salin kode CSS berikut di atas kode ]]></b:skin>

#searchbox{padding:0 auto;margin:3px;float:right;height:28px;text-align:center;background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #555;font-size:14px;color:#fff;width:166px;border:0;solid;#444;border-radius:2px;outline:none;
box-shadow:2px 2px 5px hsla(0,0%,100%,.5),-2px -2px 5px hsla(0,0%,0%,.5),inset 5px 5px 15px hsla(0,0%,0%,.5)
}

#searchbox:hover{background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #888;color:#000}

#searchbox:focus{background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #111;color:#000
-webkit-box-shadow: inset 0 0 20px green, 0 0 20px green;
-moz-box-shadow: inset 0 0 20px green, 0 0 20px green;
-ms-box-shadow: inset 0 0 20px green, 0 0 20px green;
-o-box-shadow: inset 0 0 20px green, 0 0 20px green;
-khtml-box-shadow: inset 0 0 20px green, 0 0 20px green;
box-shadow: inset 0 0 20px green, 0 0 20px green;
}

Setelah itu pada Bagian Elemen Laman klik tambah Gadget dan pilih HTML/javascript dan letakkan kode berikut di dalam formulirnya atau juga bisa meletakannya sesuai keinginan.

<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='240' name='q' value="Telusuri..." onfocus="this.value='';" />
</form>

Demo