Css Search Box With Speech Recognition For Blogger

Today I am going to teach you how to add beautiful good looking css search box with hover effect.This search box also containing search style like Google custom search .But the main feature of this gadget is that it is containing Speech Recognition by which user can search any thing on your site by speaking.

Preview 

  To Add this gadget you need to follow below steps-


HTML

• Copy and paste the following html code in your blog by going to layout>add gadget>html/avascript.

<form action="http://www.yoursite.com/search" class="formupsearch" method="get">
<input class="searchinputarea" maxlength="255" name="q" size="25" type="text" value="" x-webkit-speech="true">
<input class="boxsearch123" type="submit" value="search">
<input class="checkbutton23" name="sitesearch" type="radio" value="">
<input checked="true" class="checkbutton23" name="sitesearch" type="radio" value="yoursite.com">
</form>

Replace yoursite.com with your blog URL.

Now we need to add style in our search box for this we need to add css code follow below step to add css code in your blog.

CSS

Css code is divided into three part one is styling button,one is speech style and last is removing check button but don't worry you don't need to do this all you only need to copy below code and paste it.

• Copy the below code and paste it in your blog css.If you don't know how to add code iin css then follow below steps-

1. Go to blogger dashboard.
2. Now click on template tab.
3. Click on customize button and there you will find Add css option paste the below css code there.

.searchinputarea {

border: 1px solid lightGrey;

height: 22px;

width: 160px;

box-shadow: 0px 0px 0px transparent;

-webkit-transition: box-shadow 1s ease-in-out;

}

.searchinputarea:focus

{

border: 1px solid lightgrey;

box-shadow: 0px 0px  15px blue;

}

.boxsearch123 {

position: relative;

top: -5px;

right: 0px;

cursor: pointer;

width: 40px;

height: 26px;

line-height: 100%;

padding: 0;

font-size: 0;

text-indent: -999px;

color: transparent;

background: url(http://img.labnol.org/files/search-icon.png) no-repeat hsl(217, 99%, 65%) center;

border: 1px solid hsl(217, 84%, 56%);

-webkit-appearance: none;

-webkit-border-radius: 0px;

-webkit-transition: background .5s;

}

.boxsearch123:hover

{

background: url(http://img.labnol.org/files/search-icon.png)no-repeat center #357AE8;

border: 1px solid #2F5BB7;

}

.checkbutton23 {

display: none;

}

That's all now just save it and preview your website if you are facing any problem then feel free to comment below.