Add Fresh and Beautiful Search Boxes to Blogger /Blogspot

Fresh and Beautiful Search boxes to your blogger blogs. i given asimple search box widget. here i giving six beautiful and fresh search box to you. Actually these are PSD source designed by Design3edge. i am converted to Blogger for you. hope you enjoyed with this!.

HOW TO ADD BEAUTIFUL SEARCH BOXES TO BLOGGER

1. Login to Blogger Dashboard -> Design tab -> Page Elements .
2. Click on Add a Gadget where you wish to place Search Box.
3. Choose HTML/JavaScript from the List.
4. Place any one Search Box code in to it and Save the Gadget.

STYLE 1

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

STYLE 2

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

STYLE 3

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

STYLE 4

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

STYLE 5

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

STYLE 6

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

Please Comment Here

Share it Please

Tweet

Unknown

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.