Add Customized Search Box Widget Blogger

As a blogger sometimes when using 3rd party template I tend to not being satisfied with the look or function of the search box.
When the look is OK, there comes problem that it doesn't work well. I mean when I try to type certain word query and hit enter no result appears.
That's little bit annoying. As everybody knows the search box on a site or blog is essential.
There are times I myself or users are lazy to browse labels or have a look at the archive and I need search box to look for a post I want to read.

Thanks to many creative and expert bloggers roaming around the internet performing their great work to help me and other beginner bloggers when dealing with the matter of template customization.

Following are the steps to put customized search box on a blog (style 1 & style 2).

Style 1.

On the Layout page  --->  click Add a Gadget  --->  Select  HTML/JavaScript  --->  paste the below codes on the provide box ---> Click Save and done.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>

Style 2.

On the Layout page  --->  click Add a Gadget  --->  Select  HTML/JavaScript  --->  paste the below codes on the provide box ---> Click Save and done.

<style>
#MBBOldSearch {
display: block;
clear: both;
margin: 10px 0;
}
#MBBOldSearch #MBBSinput {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjY_1qY13iCFqHswmbLagkWZIxOofIhDmnCGj5g_Bq8_nd0OEUkHRxaGfyT0gL0opEEJHOe7eQIMzIPVMt2S903yF2-1-DJXoJXijuC01xbwtlZQX1VJ01Xp_BS-QrPMgXOnQlOWMoJ9jz/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
padding: 7px 15px 7px 35px !important;
color: #444;
font-weight: normal; font-style:italic;
text-decoration: none;
border: 1px solid #D3D3D3 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 59%;
}
#MBBOldSearch #MBBSsubmit {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 8px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<div id="MBBOldSearch">
    <form action="/search">
        <input name="q" id="MBBSinput" type="text" />
        <input value="GO!" id="MBBSsubmit" type="submit" />
    </form>
</div>

Note: The codes in blue are items for you to change according to your taste.