Trik | Tips | Cara Membuat

<form action="/search">
<input id="inputs" name="q" onwebkitspeechchange="StartSearch()" placeholder="Telusuri apapun yang ingin Anda cari disini..." type="text" x-webkit-grammar="builtin:search" x-webkit-speech="" />
<input id="nyari" type="submit" value="CARI" /></form>
<style>
#inputs{float:left;width:400px;border:2px solid #16a085;font-size:1.2em;font-weight:bold;padding:15px 20px;background-color:transparent;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font:16px Philosopher,Arial,Sans-Serif;}
#inputs:focus{outline:none;border-color:#1abc9c;}
#nyari{float:left;margin-left:7px;margin-top:10px;padding:5px 10px;border:2px solid #16a085;font-size:1.2em;font-weight:bold;color:#95a5a6;background-color:transparent;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;outline:none;cursor:pointer;font:16px Philosopher,Arial,Sans-Serif;}
#nyari:hover{color:#ecf0f1;background-color:#16a085;border-color:#16a085;}
</style>

Berkas di atas bisa anda salin ke bagian manapun di halaman situs anda. Mengenai ukuran (lebar maupun tinggi), warna, bentuk, teks, dan tata letak kotak pencarian.. masih bisa disesuaikan serta dikreasikan sesuai keinginan.
Satu hal yang selalu saya sertakan pada kotak pencarian adalah fitur Search by Voice. Tetapi jika tidak ingin menggunakan fitur tersebut, anda boleh menghapus kode x-webkit pada berkas.

Beberapa demonstrasi nya sudah saya siapkan di bawah ini. Sengaja saya sajikan dalam tiga warna yang berbeda, supaya kemudian anda mendapatkan gambaran yang jelas mengenai kotak pencarian ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[ $(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$("img:not([alt])").attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$("img:not([alt])").attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
//]]>
</script>