Get Voice Recognition Search For Your Blogger, Wordpress, Website etc.

In this tutorial we are going to provide you the code for voice search.


DEMO:




Appearance may differ.
Code

Css

form{
 width:500px;
 margin:0 auto;
}
.search { 
 padding:6px 15px 6px 30px;
 margin:3px; 
 background: url('./images/search.png') no-repeat 8px 6px; 
}
input[type=text]{
 color:#bcbcbc;
}
.rounded { 
 border-radius:15px; 
 -moz-border-radius:15px; 
 -webkit-border-radius:15px; 
}                                      (Not So Necessary)

input[type=button], input[type=button]:hover {
 position:relative; 
 left:-6px;
 border:1px solid #adc5cf;
 background: #e4f1f9; /* Old browsers */
 background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
 background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */
 color:#7da2aa;
 cursor: pointer;
}
.lighter, .light, .dark {
 width:95%;
 height:50px;
 padding:40px 25px;
}

.dark{
 background: url('./images/dark_grey.jpg');
}
.dark input[type=text]{
 border:1px solid #2a2e31;
 background-color:#2d3035;
 color:#505358;
}

HTML

<form action="http://www.google.co.in/search" method="get">
<input name="q" placeholder="Search" size="30" type="text" width="200" x-webkit-speech="" />
<input type="submit" value="Google Search" />
</form>

Comments

Popular posts from this blog

How to add Guest Book Widget For Blogger and Websites

Nokia 9 Images Leak and We See Something Satisfying

Cool Android Setups #1