Stylish Mouse Hover Search Box Widget for Blogger

Search engines helps viewers search the content of the site easily and more over it benefits the site owner by increasing the click rate of the site. The following is the search box code especially created for blogger platform. The smooth mouse hover effect brings beauty to the blogger. Let’s take a look how to add the code into your blogger.

DEMO

 

 

Step 1: Login to your blogger.

 

Step 2: Go to ‘Layout’ and click on ‘Add a Gadget’.

 

Step 3: Choose ‘HTML/JavaScript’ from the list.

 

Step 4: Copy&Paste the following code into it

<style>
#white #search {

}

#white #search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLnA3vltJHdxnfLqSDkfouhP6UkAzuC6KVjWemH15EAuvolk9q6toRFQM-kFED19uNPYMfSIC6DY3B_JnUTKOmLgpijEVU810Onli1EMJdMSFJ4GDwjrrFy0pyEMspBZBpVF-NG07MP18/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 210px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#white #search input[type="text"]:focus {
    width: 215px;
    }
</style>   
<div id="white">
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Advanced Search" />
</form>
</div>

Step 5: Click on ‘Save’.

 

Now drag it to the place where you wanted it to appear.

 

Step 6: Click on ‘Save Arrangement’ and after saving ‘view blog’.

 

Customizing the width of search box

This width: 210px; piece of code is the width of search box before mouse hover & this width: 215px; piece of code is the width of search box after the mouse hover. You can customize it according to your requirements.