UrduBloggingHub | Informatvie Blog About SEO & Blogging: How To Add Four Stylish Css SearchBoxes To Blogger Blogs

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 four 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.

Add Search Box widget to blogger blog:

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

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

Note 2: In all the below codes Replace urdublogginghub.blogspot.com with your blog address.

Dynamic width ( Expandable ) search box Design:

This is the best design among all search box designs. In this design the search box expands  on mouse hover on it and goes back to normal when mouse is taken away from it. You can customize the color of the button according  to your choice by using color code tool.

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://urdublogginghub.blogspot.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>

Clean Yellowish Search Box:

Code:

<style>
#wc-searchsimplebox1
{
padding:10px;
width:280px;
}
#wc-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
width:170px;
font:14px verdana;
}
</style>
<div id='wc-searchsimple1'>
         <form name='input' action='http://urdublogginghub.blogspot.com/search'  method='get' id="wc-searchsimplebox1">
            <input name='q' id='wc-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='wc-searchsimplesubmit1' type='submit' value='Search'/>
         </form>
      </div>

Elegant Green Search Box:

Code:

 <style>
#wc-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:280px;
}
#wc-searchgreenbox1
{
padding:10px;
}
#wc-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
width:178px;
font:14px verdana;
}
</style>
<div id='wc-searchgreen1'>
         <form action='http://urdublogginghub.blogspot.com/search'  method='get' id="wc-searchgreenbox1">
            <input name='q' id='wc-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='wc-searchgreensubmit1' type='submit' value='Search'/>
         </form>
      </div>

 Dark Black and Raddish Search Box:

Code:

<style>
#wc-searchblack1
{
background: #222222;
border-radius:10px;
width:280px;
}
#wc-searchblackbox1
{
padding:10px;
}
#wc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
width:178px;
font:14px verdana;
}
</style>
<div id='wc-searchblack1'>
         <form name="input" action="http://urdublogginghub.blogspot.com/search"  method="get"  id="wc-searchblackbox1">
            <input name="q" id='wc-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='wc-searchblacksubmit1' type='submit' value='Search'/>
         </form>
      </div>

Note:

In all the above codes Replace urdublogginghub.blogspot.com with your blog address.

Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)