4 Stylish and Clean Search Boxes For Blogger

In our previous post, we have provided you with an Expandable Search Box for your blogger blogs. So today similar to that not expandable but clean and good looking search boxes which will attract your visitors to navigate your site more and more.
In this article I will give you 4 different search boxes with great design namely Clean Search Box, Elegant Green, Easy Blue and Dark Elegant Black. So here are the codes, before that look at the steps that you need to follow.

Add 4 Stylish and Clean Search Boxes For Blogger

• Go to your blogger dashboard and select your blog.
• Select Layout option.
• Select Add a gadget option.
• Select HTML/JavaScript widget.
• In the HTML/JavaScript widget paste code of the search box widget and save the widget.

Note : You can use the code of any search box from the below given 4 designs.

1. Clean Search Box

<style>
#mbt-searchsimplebox1
{
padding:10px;
}
#mbt-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
width:130px;
font:14px verdana;
}</style>
<div id='mbt-searchsimple1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchsimplebox1">
            <input name='search' id='mbt-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchsimplesubmit1' type='submit' value='Search'/>
         </form>
      </div>

2. Elegant Green

<style>
#mbt-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#mbt-searchgreenbox1
{
padding:10px;
}
#mbt-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='mbt-searchgreen1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchgreenbox1">
            <input name='search' id='mbt-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchgreensubmit1' type='submit' value='Search'/>
         </form>
      </div>

3. Easy Blue

    <style>
#mbt-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#mbt-searchbluebox1
{
padding:10px;
}
#mbt-searchbluesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchblueinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='mbt-searchblue1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchbluebox1">
            <input name='search' id='mbt-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchbluesubmit1' type='submit' value='Search'/>
         </form>
      </div>

4. Dark Elegant Black

    <style>
#mbt-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}
#mbt-searchblackbox1
{
padding:10px;
}
#mbt-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='mbt-searchblack1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchblackbox1">
            <input name='search' id='mbt-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchblacksubmit1' type='submit' value='Search'/>
         </form>
      </div>

Happy Blogging :-)