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/AVvXsEinCUKJEd_lWusAjZcdVzBtVrWJo03Uk0q5srN2KwfpEuxBRQh7M9dUW81sLHYqF4ZasGOkjilaeB__rqJgL_eCNH17J5sCmt-IsdHab6Jzhx6e0U-Y3pRdOiDb723p9z5mLlW8k7Fk9KCU/) 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/AVvXsEjlnYClLV2n5TTbnlM75sTIMqbAS_B35cHhz8vBPnUE0XVHy6VPs_xMe4gVY6DnXUNZja5OB42EE7yv8SNO2ZQr2p2TsJ6s_LGOv3LoOVUH1pCGXaXY41TJDs8syBRShUU26Pqn8F3ZH7ru/) 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/AVvXsEiaNhmIPiCS-A99tw980KzPH5KYpkk-7XGsD1nzg-PZ0b86VWNZ_FcgN15lHxAlz5pTo4om1Mv-TWE2MbuWLYQ9CRhHtOBZgjf-CXbN8JamnuTG7M-N2LY4qnHEqb9p8h9jYu5dDvGTV-Bz/) 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/AVvXsEhqk4T7P3o8kH4pG-HZdk_zHuCg0gg4Ehd6D9IUwRFIjcwpsNYnwGZeGGF_NzVMcHg3eG-YHWpm_93kUY5fP_PvuSjtE44p_CN-nQpQSNXTYHQM7CApL875WwoEA-cYOltax4SNAiCoFtZd/) 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/AVvXsEgxGi7ot5cl6Hjif9O9azqLAVMAqY8TU7rYpe8AaJJkEgzcnW4RoASOWZ2UMCilMBcnrH0w9dWf_BzVrs6Tq9WKn26hW3ZzFryo1-O0nIAGVm5gB3hJ9_0w_Xjk29wAnkjuM3cyqYwm_I0w/) 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/AVvXsEhLiWD5YznJEqUzQ715OXouiICokMb2Yp7iyaZTVkRfRmGyrYkxA9PW9lMY-6b7iamvU_AoZ2-jcJV_rzRPPWTiR5fxRDBmDrjVedUrkS9A5RGATNtqg9VR8MARUtAPqeUlCMW4_XYxukMf/) 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>
- Happy Blogging
