Add Professional Search Bar Widget For Blogger

How To Add Professional Search Bar Widget in Blogger

Today I am telling  how to add a Professional search gadget to blogger. The title should almost be a Professional Custom Search Gadget for Blogger.  It really is that easy to add and customize.Search boxes help increasing the usability for your blog or your website,  Also they are very convenient to your  website visitors .

Having a search feature on you blog can save readers A lot of time if they are looking for something specific or a certain topic. 

The easiest way to add search function is to add the blogger team designed gadget "search box".  It's a fine option if you wish to have a generic look to the search box.

Now lets start this tutorial. Before starting this tutorial take a backup of your template.

1. Now Go to Blogger Dashboard > Template > Edit HTML and paste the below CSS Code before

</style>

/* Search Box
----------------------------------------------- */
#searchformfix
{
width: 230px;
float: left;
border-right: 1px solid #E5E5E5;
border-left: 1px solid #E5E5E5;
position: relative;
background: #fff;
}
#searchform
{
margin:0px 0 0;
padding:0;
}
#searchform fieldset
{
padding:0;
border:none;
margin:0;
}
#searchform input[type=&quot;text&quot;]{
background: #fff;
border: none;
float: left;
padding: 0px 10px 0px 15px;
margin: 0px;
width: 140px;
height: 70px;
font-size: 15px;
line-height: 58px;
transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-moz-transition: all 300ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-webkit-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-o-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
color: #929292;}
#searchform input[type=submit]
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyxq7HgwD9WCiDDfTbCHBt3nLNmS1REKcQsZ17npW3giPpFCLPJ7benbraVBHLU4LyFLKr7fLwC6sMh1tgeVfPSA5X9s1AMmPM-gNTCqmR-5UWLdpvITRBzOnkBllb5ZhtRp1vhJNiSOc/s1600/search-icon.png) 20px 10px no-repeat;
cursor: pointer;
margin: 0;
padding: 0;
width: 51px;
height: 45px;
line-height: 43px;
border: none;
cursor: pointer;
padding: 15px;
margin-top: 12px;
opacity: .17;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
#searchform input[type=submit]:hover
{
opacity: 1;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}


input[type=submit]
{
padding:4px 17px;
color:#ffffcolor:#585858;
text-transform:uppercase;
border:none;
font-size:20px;
background:url(gradient.png) bottom repeat-x;
cursor:pointer;
margin-top:10px;
float:left;
overflow:visible;
transition:all .3s linear;
-moz-transition:all .3s linear;
-o-transition:all .3s linear;
-webkit-transition:all .3s linear;
}
.selectnav {
display:none;
}

Now Find This Code

<nav class='main-nav'>

If You Not Find This Code Then Try This -
Go to your Blogger Dashboard.Click on Layout tab  and click on Add a Gadget 

Select 'HTML/Javascript' and add the code given below.

<div id='searchformfix'>          <form action='/search' id='searchform'>            <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Text to Search...&quot;;}' onfocus='if (this.value == &quot;Text to Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Text to Search...'/>            <input type='submit' value=''/>          </form></div>

Save the Template And See You Done...