Customize Google Search Engine

Customize Google search engine ini dimaksudkan untuk mempercantik form Google search engine yang telah banyak dipasang di Website. Baik website pribadi, korporasi maupun Web-log site / blog-site.

Kodenya sendiri telah banyak di-post oleh para pemurah maupun para "pencari uang di Internet".
Kita semua mahfum, bahwa dengan memasang search-engine dari Google kita bisa mendapatkan penghasilan tambahan. Semakin banyak search-engine tersebut dipasang di berbagai tempat, semakin besar pula kesempatan untuk mendapatkan perolehan dana dari Google.

Pada kesempatan ini, saya tidak akan memberikan kode search-engine yang menguntungkan saya. Kode-kode berikut ini, tidak ada muatan komersial.

Baiklah, kita mulai dengan kode asal, plain search-engine yang tidak dipercantik oleh background maupun foreground.
Source code, plain Google Searh Engine :

<form name="form" method="get" action="http://www.google.com/search" class="searchinput"><input height="2" type="text" value=" " title="Type for search and Enter" size="27" framewidth="1" name="q"/><input type="hidden" value="http://trickmp.multiply.com" name="sitesearch" checked="checked"/><input type="submit"  value="search" name="sa"/></form>

Hasilnya :

Berbekal source-code tersebut, sekarang akan saya beri sedikit accessories, tombol submit "Search" saya ganti dengan gambar / image kaca pembesar. Image diambil dari site Multiply.com
Dan, source code nya :

<form name="form" method="get" action="http://www.google.com/search" class="searchinput"><input height="2" type="text" value=" " title="Type for search and Enter" size="27" framewidth="1" name="q"/><input type="hidden" value="http://trickmp.multiply.com" name="sitesearch" checked="checked"/><input type="image" title="Search" src="http://images.multiply.com/multiply/icons/clean/24x24/search.png" searchsubmit="" name="" alt="Search"/></form>

Hasilnya :

Sepertinya sudah bagus, tapi masih kurang sempurna.
Penempatan field isian dan gambar tombol tidak sejajar.
Ingat, browser akan menempatkan gambar sesuai dengan kaidahnya, yaitu dimulai dari kiri bawah.
Dengan demikian, tampilan tersebut memang sudah benar. Hanya saja tidak sedap dipandang.
Untuk mensejajarkannya, saya akan memasukkan dua object tersebut kedalam table yang mempunyai 1 baris dan 2 kolom.
Rencananya, field isian saya tempatkan di kolom kiri dan gambar kaca pembesar saya tempatkan di kolom sebelah kanan, keduanya pada baris yang sama.

<form name="form" method="get" action="http://www.google.com/search" class="searchinput"><table><tbody><tr><td><input height="2" type="text" value=" " title="Type for search and Enter" size="27" framewidth="1" name="q"/><input type="hidden" value="http://trickmp.multiply.com" name="sitesearch" checked="checked"/></td><td><input type="image" title="Search" src="http://images.multiply.com/multiply/icons/clean/24x24/search.png" searchsubmit="" name="" alt="Search"/></td></tr></tbody></table></form>

Sudah cukup baik dan semua sudah pada tempatnya. Form ini sudah dapat diletakkan dimana saja.

Kadangkala, saya memerlukan pewarnaan, agar bisa lebih serasi dengan area sekitarnya.
Saya akan memberikan style kepada Table tempat form.

<form name="form" method="get" action="http://www.google.com/search" class="searchinput"><table style="background:#B0B0B0 none repeat scroll 0 0;padding:5px;"><tbody><tr><td><input height="2" type="text" value=" " title="Type for search and Enter" size="27" framewidth="1" name="q"/><input type="hidden" value="http://trickmp.multiply.com" name="sitesearch" checked="checked"/></td><td><input type="image" title="Search" src="http://images.multiply.com/multiply/icons/clean/24x24/search.png" searchsubmit="" name="" alt="Search"/></td></tr></tbody></table></form>

warna #B0B0B0 bisa diberi nilai lain, yang sesuai.

Apabila ditambahkan background ( HS saya sebagai image background ) :

<form name="form" method="get" action="http://www.google.com/search" class="searchinput"><table style="background:transparent url(http://images.dangdutkoplo.multiply.com/logo) repeat scroll 0 0;padding:35px;"><tbody><tr><td><input height="2" type="text" value=" " title="Type for search and Enter" size="27" framewidth="1" name="q"/><input type="hidden" value="http://trickmp.multiply.com" name="sitesearch" checked="checked"/></td><td><input type="image" title="Search" src="http://images.multiply.com/multiply/icons/clean/24x24/search.png" searchsubmit="" name="" alt="Search"/></td></tr></tbody></table></form>

Semua contoh di atas, bukan image, tapi di-create dari HTML.
Dengan mengisi form tersebut, Anda dapat mecobanya.
Ganti value="http://trickmp.multiply.com" dengan URL Anda.
Semoga bermanfaat.
Enjoy.