6 Kotak Pencarian Yang Fresh dan Trendy

Kotak Pencarian, sobat pasti tahu manfaatnya bukan. Kotak pencarian ini selain berguna untuk mencari suatu artikel pada sebuah blog juga kalau dibuat dengan sentuhan artistik maka hasilnya pun akan lebih indah dan mempunyai nilai seni dan estetika yang juga menggambarkan si pembuatnya.

Ada 6 buah kotak pencarian yang fresh dan trendy saya kutip dari W2B, menurut saya patut dicoba, sobat bisa langsung ke sumbernya W2B atau bisa juga di blog ini.

6 Kotak Pencarian Yang Fresh dan Trendy :

contohnya seperti ini, boleh dicoba berfungsi atau tidak !

1. Kotak Pencarian Model 1
   
   

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

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   <br /> <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhzVX-IVetUUk2DuCB0jSVnqLxmNG_QGcaG8DtDJkTsKqBBPxSu0IkuvQhAYwZHfrHLvfqrXGYXLThNL99SRQ63-d29jiIrcHeWfru4_4aDv6nU0apxfjX06Y1GoCHAvQPiyGYbSRLqwi/) 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><br /> <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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
2. Kotak Pencarian Model 2
   
   
   script kodenya seperti di bawah ini :

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

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   <style type="text/css"> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDis0UZc4BpAgaIuhsU8W5rbUoSXs7a_h-wkF57du9GkV84m2e9Wjlhkp7c1oY3n-GafNsa1n792q5wh-Q4zwV3XDs4efNoA86q3YDEAZj9PALhe0TrqDOoVsmd8kiYgeFFu6YLMIxDNU/) 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>
3. Kotak Pencarian Model 3
   
   
   script kodenya seperti di bawah ini :
   

   <style type="text/css">
   #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6fqiz-H86uIK6cgpCj8ieNiASaRfobVsfhWqLBSypJJxI1hxGwuw89ueWgTgZpRLppx2-2f71q2YVeglxsU9IktJQk_5UOSiMMbQE_SDGE5O8Da-BeVUvo8Rsm5HvvlaysSAxowr-1dSZ/) 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>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6fqiz-H86uIK6cgpCj8ieNiASaRfobVsfhWqLBSypJJxI1hxGwuw89ueWgTgZpRLppx2-2f71q2YVeglxsU9IktJQk_5UOSiMMbQE_SDGE5O8Da-BeVUvo8Rsm5HvvlaysSAxowr-1dSZ/) 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><br /> <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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   
4. Kotak Pencarian Model 4
   
   
   script kodenya seperti di bawah ini :
   

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

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7-OFb54uvWscVYqABygmMJCPMIMNnFRI73Qmje2KIviQWIRB_1zne6WiPR0yAgPGH-nJq0kqqYHVD6gbyB6cS4uoRGNh9kN2jTIi88s6hLuiA-z1zI4EMEclM3_jK9oW48npI17ZAqfi/) 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><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   
5. Kotak Pencarian Model 5
   
   
   script kodenya seperti di bawah ini :
   

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

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvMloXiL3ScdsTHM_HAySBe7JuhKhXQzs7oZ7WTJlv5jzyg5e4KpsDmuySkhbDsfjdbJkVUT0ru10HiZ6VBZ4bEH4_wrGnAO0BmUlF63aPqJWBROHfyoQmWsZjUJkaT4i4p0cyHiE731B/) 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><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   
6. Kotak Pencarian Model 6
   
   
   script kodenya seperti di bawah ini :
   

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

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkUi9kKRa0KYza3VJJcc3aiTgmUaFndrmNPpfXggLZ0kOhaqfOxASUWoH6QSuQTpY7r0N-IFCFg2M6USYF-al_t23YHaJJvvofCeIX9WlidxhjKraWMy9kEtu5YXQT65zd-V1Lk9JDRh3/) 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><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>