Elegant And Stylish Search Box With Voice Search For Blogger

About The Widget

To decrease the bounce rate and show the efficiency of your blog and your creativity I am providing a tutorial to add a an elegant and stylish search box to blogger with voice search feature enabled.I am myself using this widget on my blog and it affected my jump rate a lot plus this makes blog look more stylish and the best feature of this is the short search url.

Steps To Add It:-

• Go to Layout Tab Of Your Blog

• Click On Add A Gadget Where You Want To Add The Widget

• Select HTML/Javascript From The List That Appears

• Leave The Title Empty And Add The Following Code In The Content Tab:-

<style> #technopcarea-css3-search{background:#eaf8fc;background-image:0;-moz-border-radius:35px;border-radius:35px;width:270px;height:35px;overflow:hidden;border-color:#c4d9df #a4c3ca #83afb7;border-style:solid;border-width:1px;padding:10px} #search,#submit{float:left} #submit{background:#6cbb6b;background-image:0;-moz-border-radius:3px 50px 50px 3px;border-radius:3px 50px 50px 3px;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;height:35px;width:60px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#23441e;text-shadow:0 1px 0 rgba(255,255,255,0.5);border-color:#7eba7c #578e57 #447d43;border-style:solid;border-width:1px;margin:0 0 0 10px;padding:0} #search{height:23px;width:180px;border:1px solid #a4c3ca;font:normal 13px 'trebuchet MS', arial, helvetica;background:#f1f1f1;-moz-border-radius:50px 3px 3px 50px;border-radius:50px 3px 3px 50px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);padding:5px 9px} #search.placeholder{color:#9c9c9c!important;font-style:italic} #search:focus{background:#fff;outline:none;border-color:#8badb4} #search::-webkit-input-placeholder,#search:-moz-placeholder{color:#9c9c9c;font-style:italic} #submit:active{background:#95d788;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset} #submit:hover{background:#95d788;background-image:0} #submit::-moz-focus-inner{border:none}</style> <link href='http://googledrive.com/host/0B52nnG4Ig6FzVHQyUWtnV2FjZ0U' /> <form id="technopcarea-css3-search" action="/search" method="get"> <input id="search" name="q" type="text" placeholder="Search Your Post Here..." x-webkit-speech='true'/> <input id="submit" type="submit" value="Search" /> </form>

Final Words

This widget is being used personally on my blog by me also because of it's elegancy and SEO friendly criteria.This widget doesn't increase the loading time of the blog,so it's doesn't affect the loading time.I recommend this widget because as it's good in look so people will prefer to search from it rather than the navigation.