Membuat Kontak Pencarian Keren CSS

Posted by : G.T.K.C NOCTURNAL Kamis, 07 Juni 2012

Kali ini saya akan berbagi Tips mempercantik blog lagi sob (^_^). keren banget lah pokonya.
di sini saya menyediakan 6 kotak pencarian yang di desain dengan css, jadi sobat hanya perlu copy kode yang di butuhkan dan silahkan pilih kotak pencarian mana yang anda suka

Tutorial :

Login ke Blogger
Masuk ke Rancangan / Design
Tambah Gadget > HTML/JavaScript
Lalu masukan code kotak pencarian di kolom yang tersedia

Berikut contoh kotak search yang keren

Kotak Search Model 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL00Zyy4Bjy9mXw0_7i3dqbrbcDFnirVeVwVg638kJR7aiSVDH0ADOXUfBOckWgHn1jur-BRMYZzg_N0r98QTU8NkjQNHhk-G6X5yUlJDlSlEuGoS8IQ6SYZo0Eu-N_qE4Xoxnrue7GyEF/) 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>

Kotak Search Model 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRkTvihapwXk-8FdIXti4MQOMX3m7V_1-hiLqg_Rvw0MIOLuRwCHiEqSddOeXj05uj0RPb9XlgmK_nKb60qpV9CtxWT1Eu3anu_KnS-CN5egbfCUOp8hyuLSgpjPoYj5WonTEoBbpJi-P1/) 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>

Kotak Search Model 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpI-PWyDJjUFwf1jguEMz3IbpBtndsp_RlE1FP4yYbF4z-4ez0ISAdbEe2JF-AUoF-WXeNzK6e0yyPiN0h6hyPiNbJLd-_cBpXHMyvjBOCIlWzPB04ueQ2Vqo4upNc67obi7SqsO2uWON/) 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>

Kotak Search Model 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirHxzyZgL7jdsc2SNdRSxNi2sp1n5sxjjhMflE4rlDJvFsTba0VVVWhLoCX2PzftqwVPPZTRZAJuB_O2qubTqiExTrakwX78DUJRbhbWmJ0NEEMjn96ojFQck7ZEbArdT5uf0ATNecvGO8/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
form>
div>

Kotak Search Model 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkPya9OAVb3jLAwRp1vqC6pFUVDX1ta1qkkIAKOIW9zka4-3UbFkDLHoEygdwWTFprXO-9NKDUO_Gf_Tdl2AplfFzSU6ySZI8YQ3HRpjIxuBUw5cEKwPKuF18v65XTkbquperZ_lg4GOZA/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
form>
div>

Kotak Search Model 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjciaLGOhXnNQBIWt_dUD4sF8UWmJgTlhuFNPlTSF2c_6kCnNEciuivBx48UzAhMZdDk1PGwlP3xknw2u9Os7y5B99IVzzmQbqaEiIbz59wtLLM3xQeCiIEt77xlJoNBK0Bc6GZV6ddEzVh/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
form>
div>