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 :
- Log in ke account blogspot anda
- Dashboard >> design >> page element
- Add a gadget >> html/javascript
- Copy paste Kode kotak search di bawah ini didalam form gadget tsb
- lalu save
<style type="text/css">Sobat bisa mengganti warna background sesuai yang sobat inginkan dengan cara mengganti angka merah pada kode (angka 1) sehingga menjadi :
#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>
- 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
kalau blog q dah ada nih sob bawaan navigasi horizontalnya
ReplyDeletekeren nih, tapi saya udah pake punya google custum search aja dah, hehe
ReplyDeletegan cara bikin efek banyangan di samping kiri kana atas bawah blog gimana ya?? efek hover disudut mksudnya macam blog ini?? :)
ReplyDelete@sayaberitahu hehehe sabar gan pasti ane bikinin tutornya XD
ReplyDeletetrims gan
ReplyDeletekalo incoming search tau tidak gan car membuatnya
@Obat Sakit 2011 masama gan,.,maksudnya??oh itu gan blum tau gan maklum nubie
ReplyDelete