Add Stylish search box for blogger

How to add stylish search box?
1. Go to blogger dashboard
2. Open layout and click "add a gadget" and choose HTML/Javascript
3. Paste the code below in the HTML/Javascript and save it.

Search Box 1

<style>
#nbc-searchsimplebox1
{
padding:10px;
}
#nbc-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchsimple1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchsimplebox1">
            <input name='q' id='nbc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchsimplesubmit1' type='submit' value='Search'/>
         </form>
</div>

Search Box 2

<style>
#nbc-searchexpandbox1
{
padding:10px;
}
#nbc-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#nbc-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='nbc-searchexpand1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchexpandbox1">
            <input name='q' id='nbc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchexpandsubmit1' type='submit' value='Search'/>
         </form>
</div>

Search Box 3

<style>
#nbc-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#nbc-searchgreenbox1
{
padding:10px;
}
#nbc-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchgreen1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchgreenbox1">
            <input name='q' id='nbc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchgreensubmit1' type='submit' value='Search'/>
         </form>
</div>

Search Box 4

<style>
#nbc-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#nbc-searchbluebox1
{
padding:10px;
}
#nbc-searchbluesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchblueinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchblue1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchbluebox1">
            <input name='q' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchbluesubmit1' type='submit' value='Search'/>
         </form>
</div>

Search Box 5

<style>
#nbc-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}
#nbc-searchblackbox1
{
padding:10px;
}
#nbc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchblack1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchblackbox1">
            <input name='q' id='nbc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchblacksubmit1' type='submit' value='Search'/>
         </form>
</div>

Search Box 6

<style>
#MBBOldSearch {
display: block;
clear: both;
margin: 10px 0;
}
#MBBOldSearch #MBBSinput {
background: url(http://4.bp.blogspot.com/-C7mh2vX4gp4/Ue6-L3iTnXI/AAAAAAAAAhI/-K6xVaVoM1g/s1600/noxdo_blogspot_com_Search-icon.png) no-repeat scroll 8px center transparent !important;
padding: 7px 15px 7px 35px !important;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 52%;
}
#MBBOldSearch #MBBSsubmit {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 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/max-results=8">
        <input name="q" id="MBBSinput" type="text" />
        <input value="Search" id="MBBSsubmit" type="submit" />
    </form>
</div>

Search Box 7

<style type='text/css'>
/*<![CDATA[*/
#sbutton {
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: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{    background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url(http://3.bp.blogspot.com/-rBTMRhkUv5A/Ue6_qllr4lI/AAAAAAAAAhc/Hbq9V3tFvqo/s1600/noxdo_blogspot_com_Search-icon2.png) no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 12px;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
/*]]>*/
</style>
<div class='noop-searchbox' id='noop-searchbox'>
<form action='/search/max-results=8' id='noop-searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<button id='sbutton' type='submit'><span id='simg'></span></button>
</form>
</div>

Search Box 8

<style>
#search-form {
background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px;
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px;
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); }
input[type="text"]{
background: #fafafa;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
border: 0; border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px; margin: 4px; padding: 5px; width: 250px;
border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px;
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); }
input[type="text"]:focus{outline: none; background: #fff;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%); }
input[type="submit"]{
background: #44921f;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
border: 0; color: #eee; cursor: pointer;
float: right; font: 16px Arial, Helvetica, sans-serif; font-weight: bold; height: 30px;
margin: 4px 4px 0; text-shadow: 0 -1px 0 rgba(0,0,0,.3); width: 84px; outline: none;
border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); }
input[type="submit"]:hover {
background: #4ea923;background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); }
input[type="submit"]:active {
background: #4ea923;background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); }
</style>
<form action="/search/max-results=8" id="searchbox">
<input name="cx" type="hidden" value="X:Y" />
<input name="cof" type="hidden" value="FORID:11" />
<input id="q" name="q" size="70" type="text" />
<input name="sa" type="submit" value="Search" />
</form>

Search Box 9

<style type="text/css">
#nbc-searchbox{background:url(http://4.bp.blogspot.com/-xDMUT_7p820/Ue7AMp2_XZI/AAAAAAAAAho/N2xwuQ1GU1I/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
</form>
</div>

Search Box 10

Search Box 11

Search Box 12

<style type="text/css">
#nbc-searchbox{background:url(http://3.bp.blogspot.com/-DqQKomzx0pw/Ue7BlSCh3zI/AAAAAAAAAiA/U3c87KbsBQc/s1600/noxdo_blogspot_com_Search-icon6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
</form>
</div>

Search Box 13

<style type="text/css">
    #hbz-searchbox {
        background-color: #F5F5F5;
        border: 1px solid #EDEDED;
        padding: 5px;
        border-radius: 10px;
        margin: 10px auto;
        min-width: 238px;
        max-width: 288px;
    }
   
    #hbz-input {
        background-color: #FEFEFE;
        border: medium none;
        font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;
        margin-right: 2%;
        padding: 4%;
        box-shadow: 2px 1px 4px #999999 inset;
        border-radius: 9px;
        width: 60.33%;
    }
   
    #hbz-input:focus {
        outline: medium none;
        box-shadow: 1px 1px 4px #0D76BE inset;
    }
   
    #hbz-submit {
        background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;
        border-radius: 9px;
        border: medium none;
        color: #FFF;
        cursor: pointer;
        font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;
        padding: 4%;
        width: 28%;
    }
   
    #hbz-submit:hover {
        background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;
    }
</style>

<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Type Here..." />
    <input type="hidden" name="max-results" value="8" />
    <input id="hbz-submit" type="submit" value="Search" />
</form>

Search Box 14

<style type="text/css">
    #hbz-searchbox {
        min-width: 250px;
        margin: 10px auto;
        border-radius: 3px;
        overflow: hidden;
        max-width: 300px;
    }
   
    #hbz-input {
        width: 59.2%;
        padding: 10.5px 4%;
        font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
        border: none;
        background-color: #EEE;
    }
   
    #hbz-input:focus {
        outline: none;
        background-color: #FFF;
        box-shadow: 0 0 2px #333333 inset;
    }
   
    #hbz-submit {
        overflow: visible;
        position: relative;
        float: right;
        border: none;
        padding: 0;
        cursor: pointer;
        height: 40px;
        width: 32.8%;
        font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
        color: #FFF;
        text-transform: uppercase;
        background-color: #D83C3C;
    }
   
    #hbz-submit::before {
        content: "";
        position: absolute;
        border-width: 8px;
        border-style: solid solid solid none;
        border-color: transparent #D83C3C;
        top: 12px;
        left: -6px;
    }
   
    #hbz-submit:focus,
    #hbz-submit:active {
        background-color: #C42F2F;
        outline: none;
    }

    #hbz-submit:focus::before,
    #hbz-submit:active::before {
        border-color: transparent #C42F2F;
    }

    #hbz-submit:hover {
        background-color: #E54040;
    }

    #hbz-submit:hover::before {
        border-color: transparent #E54040;
}
</style>

<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Search..." />
    <input type="hidden" name="max-results" value="8" />
    <button id="hbz-submit" type="submit">Search</button>
</form>

Search Box 15

<style type="text/css">
    #hbz-searchbox {
        background: transparent linear-gradient(#2C2C2C, #111);
        border-width: 1px;
        border-style: solid;
        border-color: #000;
        border-radius: 4px;
        padding: 10px;
        z-index: 1;
        display: block;
        margin: 10px auto;
        min-width: 228px;
        max-width: 278px;
    }
   
    #hbz-input,
    .hbz-submit {
        box-shadow: 0 2px #000;
        font-family: 'Cabin', helvetica, arial, sans-serif !important;
        margin: 0px;
        padding: 0px;
    }
   
    #hbz-input {
        background: linear-gradient(#333, #222);
        border: 1px solid #444;
        color: #888;
        display: block;
        float: left;
        font-size: 13px;
        height: 30px;
        padding-left: 4%;
        padding-right: 4%;
        width: 60.2%;
        border-radius: 3px 0px 0px 3px;
    }
   
    #hbz-input:focus {
        animation: glow 800ms ease-out infinite alternate;
        border-color: #393;
        color: #efe;
        outline: none;
    }
   
    .hbz-submit {
        background: linear-gradient(#333, #222);
        box-sizing: content-box;
        border: 1px solid #444;
        border-left-color: #000;
        color: #fff;
        display: block;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        position: relative;
        width: 30%;
        cursor: pointer;
        border-radius: 0px 3px 3px 0px;
    }
   
    .hbz-submit:hover,
    .hbz-submit:focus {
        background: linear-gradient(#393939, #292929);
    }
   
    .hbz-submit:hover,
    .hbz-submit:focus {
        color: #5f5;
        outline: none;
    }
   
    .hbz-submit:active {
        top: 1px;
    }
   
    @keyframes glow {
        0% {
            border-color: #393;
            box-shadow: 0 2px #000, 0px 0px 5px #3DAD3D, inset 0px 0px 5px #1F391F;
        }
        100% {
            border-color: #6f6;
            box-shadow: 0 2px #000, 0px 0px 8px #6bab6b, inset 0px 0px 10px #1F391F;
</style>

<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Search..." />
    <input type="hidden" name="max-results" value="8" />
    <button class="hbz-submit" type="submit">Search</button>
</form>

Search Box 16

<style type="text/css">
    #hbz-searchbox {
        height: 40px;
        position: relative;
        min-width: 250px;
        max-width: 300px;
        margin: 10px auto;
    }
   
    .hbz-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #009bff;
        cursor: pointer;
        border-bottom: 5px solid #0276c1;
    }
   
    .hbz-buttonwrap:hover {
        border-bottom: 5px solid #bc490a;
        background: #d75813;
    }
   
    .hbz-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }
   
    .hbz-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }
   
    .hbz-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }
   
    #hbz-input {
        height: 32px;
        width: 82%;
        position: absolute;
        padding-left: 4%;
        border: none;
        outline: none;
        right: 14%;
        border-bottom: 5px solid #bbb;
        border-left: 1px solid #eaeaea;
        background-color: #fbfbfb;
        border-top: 1px solid #eaeaea;
        box-shadow: 1px 1px 2px #e9e4e4 inset;
    }
   
    #hbz-input:focus,
    #hbz-input:active {
        background-color: #fff;
    }
</style>

<form action="/search" id="hbz-searchbox" method="get">
    <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="hbz-input" placeholder="Type here ..." />
    <input type="hidden" name="max-results" value="8" />
</form>

Search Box 17

<style type="text/css">
    #hbz-searchbox {
        height: 35px;
        margin: 10px auto;
        position: relative;
        min-width: 250px;
        max-width: 300px;
    }
   
    .hbz-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #444;
        cursor: pointer;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
   
    .hbz-buttonwrap:hover {
        background: #1a1a1a;
    }
   
    .hbz-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }
   
    .hbz-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }
   
    .hbz-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }
   
    #hbz-input {
        height: 35px;
        width: 82%;
        padding: 0px;
        padding-left: 4%;
        border: none;
        outline: none;
        position: absolute;
        right: 14%;
        box-shadow: inset 0 2px 2px #080808;
        background-color: #444444;
        color: #fff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: all 0.5s;
    }
   
    #hbz-input:hover,
    #hbz-input:focus {
        box-shadow: inset 1px 1px 10px #000;
    }
</style>

<form action="/search" id="hbz-searchbox" method="get">
    <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="hbz-input" placeholder="Search..." />
    <input type="hidden" name="max-results" value="8" />
</form>

Add Stylish search box for blogger
1. Go to blogger dashboard
2. Open layout and click "add a gadget" and choose HTML/Javascript
3. Paste the code above in the HTML/Javascript and save it.

Add Stylish search box for blogger

Contact form