Membuat Kotak Search Engine sendiri

Assalamualaikum wr.wb.

Kali ini Yang Penting share akan mengajak sobat untuk membuat kotak search yang stylish pribadi di blogspot. Tutorial kali ini akan mengajarkan sobat bagaimana memodifikasi kotak search sobat, sehingga akan lebih stylist dibandingkan yang default. Gambarnya bisa sobat lihat diatas. Design asli seperti di bawah ini dibuat oleh Design3edge.Namun tenang saja, sobat tidak perlu repot lagi, karena sekarang sudah diconverted ke blogger. Jadi, tinggal copy paste kodenya saja.

Cara pemasangan :

1.  Log in ke account blogspot anda
2. Dashboard >> design >> page element
3. Add a gadget >> html/javascript
4. Copy paste Kode kotak search di bawah ini  didalam form gadget tsb
5.  lalu save

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhv-9Tvoy6BMrp6QkFKWTZ-5OSxb3X0RXlZ-s7DU9Lv4-EsNuQXdxIS4E-oV790QmVosv71ZUkR-e4JvJS2J_QBmUqnNtCkwAcXzEk2CtM4_AEqUY-NzBSvPMwAURwRCg_Xaxlmj5sMFme/1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

 Sobat bisa mengganti warna background sesuai yang sobat inginkan dengan cara mengganti angka merah pada kode (angka 1) sehingga menjadi :

• angka 1 untuk warna Hitam
• angka 2 untuk warna oranye
• angka 3 untuk warna Merah
• angka 4 untuk warna Putih
• angka 5 untuk warna Abu-abu
• angka 6 untuk warna Biru

 contoh :

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhv-9Tvoy6BMrp6QkFKWTZ-5OSxb3X0RXlZ-s7DU9Lv4-EsNuQXdxIS4E-oV790QmVosv71ZUkR-e4JvJS2J_QBmUqnNtCkwAcXzEk2CtM4_AEqUY-NzBSvPMwAURwRCg_Xaxlmj5sMFme/ing_searchbox2.png 
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhv-9Tvoy6BMrp6QkFKWTZ-5OSxb3X0RXlZ-s7DU9Lv4-EsNuQXdxIS4E-oV790QmVosv71ZUkR-e4JvJS2J_QBmUqnNtCkwAcXzEk2CtM4_AEqUY-NzBSvPMwAURwRCg_Xaxlmj5sMFme/ing_searchbox3.png  
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhv-9Tvoy6BMrp6QkFKWTZ-5OSxb3X0RXlZ-s7DU9Lv4-EsNuQXdxIS4E-oV790QmVosv71ZUkR-e4JvJS2J_QBmUqnNtCkwAcXzEk2CtM4_AEqUY-NzBSvPMwAURwRCg_Xaxlmj5sMFme/ing_searchbox4.png

Oh ya kalau sobat mau mengganti backgroundnya sobat cukup mengganti "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhv-9Tvoy6BMrp6QkFKWTZ-5OSxb3X0RXlZ-s7DU9Lv4-EsNuQXdxIS4E-oV790QmVosv71ZUkR-e4JvJS2J_QBmUqnNtCkwAcXzEk2CtM4_AEqUY-NzBSvPMwAURwRCg_Xaxlmj5sMFme/ing_searchbox1.png  " dengan url background sobat sendiri,tapi jangan lupa untuk mengatur ulang ukuran dan penempatan.Oke,semoga bisa bermanfaat,selamat berkreasi ^^

sumber: http://www.burukutuk.com/2011/06/membuat-kotak-search-pribadi-di.html

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854