15 Jun 2011

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.

kotak pencarian

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

6 comments:

  1. kalau blog q dah ada nih sob bawaan navigasi horizontalnya

    ReplyDelete
  2. keren nih, tapi saya udah pake punya google custum search aja dah, hehe

    ReplyDelete
  3. gan cara bikin efek banyangan di samping kiri kana atas bawah blog gimana ya?? efek hover disudut mksudnya macam blog ini?? :)

    ReplyDelete
  4. @sayaberitahu hehehe sabar gan pasti ane bikinin tutornya XD

    ReplyDelete
  5. trims gan
    kalo incoming search tau tidak gan car membuatnya

    ReplyDelete
  6. @Obat Sakit 2011 masama gan,.,maksudnya??oh itu gan blum tau gan maklum nubie

    ReplyDelete