Search box helps your visitors to search the posts what they want. A search box will definitely be needed if you have a lot of contents in your website. But, not only work we also want to make our website looking awesome. That's why we can make our Search bar more beautiful using css search boxes. If you add a stylish css3 search box, your blog seems so beautiful. Today I wanna share with you a set of colorful search boxes for your blogger blog. So, lets start learning how to use stylish Search Boxes in your blogger blog.
You can have more Stylish Search Boxes for Blogger Blogs
This is the time to find out the best matching Search box for your blog.
You can have more Stylish Search Boxes for Blogger Blogs
- Choose your desired search box below & copy the code of that search box
- Go to Blogger Dashboard → Layout → Add a Gadget → HTML/JavaScript
- Now, Paste code (leave title column blank) and then click on Save.
This is the time to find out the best matching Search box for your blog.
<style type="text/css">#helperblogger-searchbox {border-radius:5px;background: URL(http://2.bp.blogspot.com/-upfLE67VJ48/T9L_1DEmg7I/AAAAAAAAB8s/HtdrkTY7GoI/s1600/helperblogger.com-red.png)no-repeatscrollcentercentertransparent;width:307px;height:50px;disaply:block;}form#helperblogger-searchform {display:block;padding:9px16px;margin:0;}form#helperblogger-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#helperblogger-searchform#sbutton {margin:0;padding:0;height:40px;width:74px;vertical-align:top;border:none;background:transparent;}</style><div id="helperblogger-searchbox"><form id="helperblogger-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>
<style type="text/css">#helperblogger-searchbox {border-radius:5px;background: URL(http://4.bp.blogspot.com/-jkzG3DU10a0/T9L_yt0nqYI/AAAAAAAAB8U/8NCpgoIYP18/s1600/helperblogger.com-green.png)no-repeatscrollcentercentertransparent;width:307px;height:50px;disaply:block;}form#helperblogger-searchform {display:block;padding:9px16px;margin:0;}form#helperblogger-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#helperblogger-searchform#sbutton {margin:0;padding:0;height:40px;width:74px;vertical-align:top;border:none;background:transparent;}</style><div id="helperblogger-searchbox"><form id="helperblogger-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>
<style type="text/css">#helperblogger-searchbox {border-radius:5px;background: URL(http://1.bp.blogspot.com/-3QS-Mh7cdm4/T9L_x-etZiI/AAAAAAAAB8Q/OXgi3sBFiRI/s1600/helperblogger.com-blue.png)no-repeatscrollcentercentertransparent;width:307px;height:50px;disaply:block;}form#helperblogger-searchform {display:block;padding:9px16px;margin:0;}form#helperblogger-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#helperblogger-searchform#sbutton {margin:0;padding:0;height:40px;width:74px;vertical-align:top;border:none;background:transparent;}</style><div id="helperblogger-searchbox"><form id="helperblogger-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>
<style type="text/css">#helperblogger-searchbox {border-radius:5px;background: URL(http://3.bp.blogspot.com/-8DNTltUx70c/T9L_zrbhRaI/AAAAAAAAB8g/5H5PYM-I20I/s1600/helperblogger.com-orange.png)no-repeatscrollcentercentertransparent;width:307px;height:50px;disaply:block;}form#helperblogger-searchform {display:block;padding:9px16px;margin:0;}form#helperblogger-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#helperblogger-searchform#sbutton {margin:0;padding:0;height:40px;width:74px;vertical-align:top;border:none;background:transparent;}</style><div id="helperblogger-searchbox"><form id="helperblogger-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>
<style type="text/css">#helperblogger-searchbox {border-radius:5px;background: URL(http://1.bp.blogspot.com/-xUr8VMkrYEw/T9L_0s7DQoI/AAAAAAAAB8k/LTQ94RRZrJA/s1600/helperblogger.com-purple.png)no-repeatscrollcentercentertransparent;width:307px;height:50px;disaply:block;}form#helperblogger-searchform {display:block;padding:9px16px;margin:0;}form#helperblogger-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#helperblogger-searchform#sbutton {margin:0;padding:0;height:40px;width:74px;vertical-align:top;border:none;background:transparent;}</style><div id="helperblogger-searchbox"><form id="helperblogger-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>
0 comments
Post a Comment