Stylish Search Boxes For Your Blogger Blog

Stylish Search Boxes
Adding search box will help your blog readers to find the actual post they need. If there are a lot of articles in your blog, you have to add a search box definitely. If you add a stylish css3 looked search box, your blog seems so good. Today i wanna share with you a set of colorful search boxes for your blogger blog. Actually its designed by Design3Edge. It inspired me by Helper for Blogger, the blogger tutorial blog under the authorization of Rahul Ippar. So lets get into our mission.


Question Mark Icon How To Add This Search Box To Your Blog
       1. First choose your desired search box below
       2.  Copy the code of that search box
       3. Go to Blogger Dashboard > Layout
       4. Click on Add a Gadget
       5. Select HTML/JavaScript
       6. Paste code (leave title column blank) and save it



Search Box






<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-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
  
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>




Seach box 2





<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-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
  
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>




Search Box 3





<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-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
  
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>




Search Box 4





<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-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
  
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>




Search box 5





<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-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
  
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>


Now you can save your search box and you done. Finally drag your search box widget to the top of your sidebar. Because it looks something professional. Happy blogging:)