Cara membuat kotak pencarian

ini neh kumpulan script kotak pencarian yang keren
cara membuatnya
1. masbro & mbabro harus masuk ke akun blognya masing-masing
2. lalu pilih desain >> tata letak >> tambah gadget >> HTML/java script
3. pilih script kotak penjarian yang disukai, paste di kotak konten, lalu simpan, dan lihat hasilnya

( Biru Putih )

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

( Krem Putih )

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

( Blur Hitam Putih )

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

( Kuning Putih )

<style type="text/css"> #w2b-searchbox{background:url(http://lh3.googleusercontent.com/

-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.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>

( Merah Putih )

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK-Xb1bj84XxMrFSJsN6aF67eS49UV35px7kPWyKVBMbjlcu2VWEEwWaBezL7FxJ50UxorUj5DTSuppJKiLXGQz59-wf__-QyYcN_TLk1UiqI6Z1dzIG_HvTupmO86XTCO-86wYHdpkTac/) 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>

 ( Hitam Putih )

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

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY4Ms-Rr_ZIE0O6qyKbJnfDf6roYSavGHi8rJ_Ihm6XFdxulNC4OxtvMboSpFxJdJn2TQSljzmCpjk6X15DTiipugP1K6_Uf5gjZ0btLpfj58kW4WKtyPOlURUgNZfGnubVY-5BDTaRmaZ/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" 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="abutton" /> </form></div>
</span>

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtG_e5bwkqUYm4YTuBCeHNW9MhYzmOcwiO0-vQoe0l_8x-GeXDOZAUs-Goa_S3_gGHnfrNPyNTKBvdCDta-R8PCQedgjRRZDPDoS3Kis0TYFLBRwx3Af6lS6W8UOOmZrGhir27Hxm6KQpI/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent;    width: 307px;    height: 50px;    disaply: block;}  form#mediablogger-searchform {    display: block;    padding: 9px 16px;    margin: 0;}  form#mediablogger-searchform #s {    padding-left: 24px !important;    padding: 7.5px;    margin: 0;    width: 198px;    font-size: 16px;    font-family: georgia;    font-style: italic;    color: #666666;    vertical-align: top;    border: none;    background: transparent;}  form#mediablogger-searchform#sbutton {    margin: 0;    padding: 0;    height: 40px;    width: 74px;    vertical-align: top;    border: none;    background: transparent;}</style><div id="mediablogger-searchbox">    <form id="mediablogger-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...";}' /></form></div>

Keterangan :
Ganti tulisan yang berwarna Hijau dengan berbagai macam pilihan style dibawah ini :

Gaya Pencarian warna hijau :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtG_e5bwkqUYm4YTuBCeHNW9MhYzmOcwiO0-vQoe0l_8x-GeXDOZAUs-Goa_S3_gGHnfrNPyNTKBvdCDta-R8PCQedgjRRZDPDoS3Kis0TYFLBRwx3Af6lS6W8UOOmZrGhir27Hxm6KQpI/s1600/impoint.blogspot.com-green.png

Gaya Pencarian warna merah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNggAdVhkrAxIB0x6Tn5zdRpS-d4xwEZN31W_T8D-mjWO1oHsf0xZi55yNplwm-mgpRfsvbRtdkNkWbqQpT0AmZtxjefGZXgqV3dbfkMefpMXzTz_AX6QqKlMaNunmq6HXkhYLFddPQHGz/s1600/impoint.blogspot.com-red.png

Gaya pencarian warna biru :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdpTzZk_3lyXyFxLX9_wgNrEFuFKN6LdJBEwuCvBOOaOd-Z8wJgzXdZEVAg86daLjD1GGj75sLKtPoAOHDW0vJgjuHeQH6WBjJ0yC6-qHzwpHrWAZu27QzFsN9Fu2hPQE2Ww55aroEVSr4/s1600/impoint.blogspot.com-blue.png

Gaya Pencarian warna orange :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirFZrC5nVmBuYD7lwr35R981ja2J8BDvN6FH7MxFmzid5VSwlJ8pUjXaYYZmiEE0XC5K9ZkKgANo5MDnnrncJBzoBVjzS6PQVXs1IyWSC5EQHik15CiPs0t9gPq8Y4FCRu3rbqyZS_qcvX/s1600/impoint.blogspot.com-orange.png

 <form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;

ubah tulisan yang berwarna merah sesuai keinginan masbro & mbabro

Semoga membantu ^.^