Well in this New Blogger Tutorial Iam Going to Show you how to Add a Google Search Engine Style Search for Your Blog With Simple HTML And CSS.First of all We Have to Use Some HTMl And Create a Simple Search Bar with a Speech Recognition Tool.Thereafter We Have to Style the Search Bar By CSS.So See How the Search Bar Look like in the Below Image.

So This is How the Widget Look Like.So now Let's PRoceed To the Tutorial...

The Html

Add the HTML Code in a New Widget..(Add a Widget < Choose HTML/Javascript).

<form action="http://www.google.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="goodinblogging.blogspot.com">
<div class='mpt-links'>
<a class='mdt-oplink' href='goodinblogging.blogspot.com/' target='blank'>Get this bar<a class='mdt-oplink2' href='http://goodinblogging.blogspot.com' target='blank'> -by GoodinBlogging</a>
</div>
</form>

Note that In the First Line I've Highlighted "http://google.com/search". You Can Change it to Your Blog URL "http://yourblog.blogspot.com"  if you want the search results to appear on your blog/website.

Also Change Value ="http://goodinblogging.blogpsot.in" With Your Blog URL.

Now HTML Part is Completed, a Simple Search Bar is Completed Now. But Our Intention is to Style it. So We have to Add Some CSS to it..

THE CSS:.

Add the CSS Before ]]></b:skin> in your Template 

.searchinputarea {
border: 1px solid lightGrey;
height: 26px;
width: 180px;
box-shadow: 0px 0px 0px transparent;
-webkit-transition: box-shadow 1s ease-in-out;
padding-left: 8px;
font-size: 15px;
font-family: verdana;
padding-top: 2px;
}



.searchinputarea:focus {
border: 1px solid lightGrey;
box-shadow: 0px 0px 10px rgba(0, 110, 250, 0.2);
outline: 1px solid #ECECFA;
}

.boxsearch123 {

position: relative;
right: 0px;
vertical-align: top;
cursor: pointer;
width: 40px;
height: 31px;
line-height: 100%;
padding: 0;
font-size: 0;
text-indent: -999px;
color: transparent;

background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFKSURBVHjalNJPK0RRHMbx4//fjEJSmqwsZmdhvAvFSjGRt8BGeQEWLC1Y0WSjlJWykUJs2GkysVEjm9lokjJc38Nzm9O592rmV5/umXt+83TOuccEQWBkBGt4QFWesYG00xcRDjK4C2pVwZvzu4Sp/0L6cKVm+8cjLGEeeZQ194SxpJCcmt6xHtM0hw/17CSFnKjhHL0JS86r5wLd/nyzMabf/NU1Kia+TvUcxrg/aUO+NO40ydWiZ1UiIS8aZ5GKCehATuNXPEY62NMMvmVPX6sNrdr/puY+sZJ0sF04cO5EAdvYwq3z3n7qRaSSLtuo7od7wQLn0xe1GlvHmHRDmn6TarWAaQyiHSWc4RKHyKivgGXchGcSx57FgPdu1VvhPbLuduqR0o0NvPNLNxJi9cQEzTYaEgbtKmAfQ/7B1lv2dk+giPKPAAMA+57Ayn+WvQEAAAAASUVORK5CYII=') no-repeat #4D90FE center; 
border: 1px solid hsl(217, 84%, 56%);
-webkit-appearance: none;
-webkit-border-radius: 0px;
-webkit-transition: background .5s;
}

.boxsearch123:hover
{
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFKSURBVHjalNJPK0RRHMbx4//fjEJSmqwsZmdhvAvFSjGRt8BGeQEWLC1Y0WSjlJWykUJs2GkysVEjm9lokjJc38Nzm9O592rmV5/umXt+83TOuccEQWBkBGt4QFWesYG00xcRDjK4C2pVwZvzu4Sp/0L6cKVm+8cjLGEeeZQ194SxpJCcmt6xHtM0hw/17CSFnKjhHL0JS86r5wLd/nyzMabf/NU1Kia+TvUcxrg/aUO+NO40ydWiZ1UiIS8aZ5GKCehATuNXPEY62NMMvmVPX6sNrdr/puY+sZJ0sF04cO5EAdvYwq3z3n7qRaSSLtuo7od7wQLn0xe1GlvHmHRDmn6TarWAaQyiHSWc4RKHyKivgGXchGcSx57FgPdu1VvhPbLuduqR0o0NvPNLNxJi9cQEzTYaEgbtKmAfQ/7B1lv2dk+giPKPAAMA+57Ayn+WvQEAAAAASUVORK5CYII=') no-repeat #4D90FE center;
border: 1px solid #2F5BB7;
}

.mpt-links a
{
    font-family:'helvetica';
    font-size:10px;
    text-decoration:none !important;
    position:relative;
    left:31px;
    bottom:3px;
}    
.mdt-oplink2 {
    color:grey !important;
} .checkbutton23 {
display: none;
}

Now After Adding the Code to Your Blog Save the Template and that's it Now You're Done..

If You Feel Any Problem.. Then Feel Free to Ask in the Comments...Enjoy