7 Styles of Search Box Widget to Blogger Blog

Blogger has its own search box widget for their blogs but its design is not very attractive. It is an old school design widget. In this post we will discuss about adding custom search box to a blogger blog. We will also provide 5 Stylish and attractive search box designs for your blogger blogs. These search box designs are applicable to almost any type of blog design. Adding these search boxes to your blog is like a breeze, you just need to copy and paste the code on your blog without any modifications in it.

Is it necessary to add search box in our blog?

Yes, it is very important to add search box in our blog. By using search box blog visitors can search any post in our blog`s archive without any effort. Suppose you have a large blog with thousands of posts then it is very difficult for your blog visitors to find any specific article in your blog by going through the complete archive of your blog posts. If you have search box installed on your blog then visitors can directly search any post by using it. In this way search box helps blog visitors to easily navigate through your blog and get their required information

Add Search box widgets to blogger blog

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.

Style.1:Metro Style Search Bar for Blogger

A Metro Style Blogger Search Bar.

Its CSS has been compressed to make it load faster. The bar looks very cool and I personally like it. Well there is no need to demo for this search bar, you can see how this search bar looks in the above image.

CODE:

<style>
#abt-search-btn {
background: none repeat scroll 0 0 #359BED;
border: 0 none;
border-radius: 0 0 0 0;
color: #FFFFFF;
font-weight: 700;
padding: 10px 20px;
}
#abt-search-box {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
padding: 10px;
width: 160px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder=" Type! :D "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>

Style.2:Simple Search Box Widget

Hi Friends! Add a Simple Search box to Blogger Blog. most of custom templates has comes with no search box, here is the simple Search box for you. just add it with a single click and enjoy!

CODE:

<style>
#wc-searchexpandbox1
{
padding:10px;
}
#wc-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#wc-searchexpandinput1:hover
{
width:180px;
}
</style>
<div id='wc-searchexpand1'>
<form name='input' action='http://Bloggerplanet.com/search' method='get' id="wc-searchexpandbox1">
<input name='q' id='wc-searchexpandinput1' 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='wc-searchexpandsubmit1' type='submit' value='Search'/>
</form>
</div>