Add Floating Search Box in Blogger with Voice Search?

Today I am going to show you how you can add a nice floating search box with transition effect for expanding when focused and also that comes with speech search functionality that can be used by just your voice.

Yes everything works fine, for your convenience  I have enabled the demo version of this search box right over here, . So as you click inside the text area it expands the search region providing you with more area to write your text, you can also see the voice search function, just click on it and try speaking any search keyword and see how instantly it searches everything. So now if you love this widget you might be wondering how to add it up to your blog, well check below tutorial.

    Goto Blogger > Template > Edit HTML.
    Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

    #HU-search-button{background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;border:1px solid #3079ED;border-radius:2px 2px 2px 2px;color:#FFF;height:27px;min-width:76px;padding:0 21px 2px}#HU-search-button:hover{background:linear-gradient(top,#4d90fe0%,#357ae8100%);background-color:#357AE8;background-image:0;border:1px solid #2F5BB7;box-shadow:0 1px 1px rgba(0,0,0,0.1)}#HU-search-button-img{background:url(http://i.imgur.com/GcRSyp2.png) no-repeat scroll 0 0 transparent;display:inline-block;height:14px;margin:0;width:17px;z-index:101}#HU-search-text:hover{box-shadow:0 1px 2px #C1C1C1 inset}#HU-search-text{-moz-transition:width .2s ease-in 0;-o-transition:width .2s ease-in;-webkit-transition:width .2s ease-in;border:1px solid #BCBCBC;border-radius:2px;font:italic 14px times New Roman;padding:4px 2px;width:146px}#HU-search-text:focus{width:200px}.HU-searchbox{display:block;max-width:300px;min-width:238px;position:fixed;right:0;top:1%;z-index:100}

   

Now again search for </body> tag & paste below code above it.

    <div class='HU-searchbox' id='HU-searchbox'><form action='/search' id='HU-searchform' method='get'><input id='HU-search-text' name='q' onblur='if (this.value==""){this.value="Search...";}' onfocus='if (this.value=="Search..."){this.value=""}' x-webkit-speech type='text' value='Search...'/> <button id='HU-search-button' type='submit'><span id='HU-search-button-img'/></button></form></div>

Now just Save template, if you face any error Saving, just convert the above code using out any  AdSense code converter.an
That's it now Hit Save Template and your Search Box will appear. So now refresh your blog, and try this awesome search box widget for blogger blogs.