Add 15 Stylish Search Box in Blogger blog

Today I discuss how to add stylish and beautiful search box for your blogger blog. I trust you'll adore. All search box made by using CSS3 and HTML. You can very easily customize as your own. Search box is not only making beauty in your blog template but it’s very helpful for visitors. So we should start.

How to Add Stylish Search box in Blogger blog

Following are the steps to add

Step # 1: Login to your account and go to Layout > Add a Gadget > HTML/Javascript

Step # 2: Then choose one of the search box, copy search box code and paste into your HTML/Javascript box and Saved.

Search Box Codes:

<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 expr: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>

<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 expr: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>

<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 expr: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>

<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 expr: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>

<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 expr: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>

<style>
#MBBOldSearch {
display: block;
clear: both;
margin: 10px 0;
}
#MBBOldSearch #MBBSinput {
background: url("<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf76ODhttPv6tjqk6SwGulKWRaxhjy9twp0qfjTFLhsJt84qvbIaRTcVw03U0sNmLMtWgoAaPoZJc91KwAhAp-0R6D-JzkkPQ_RdSjgUEF3aWIKnvIgQ-1qtbmyQrFq_43_DUpZRdiFyw/s1600/noxdo_blogspot_com_Search-icon.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1hCn8HIxacSXPG9OYb3SspkQNSWtz8lyD9XQSIoZOcEwY0TiOCABLau4gvaULmmmvc2j86V1O_3dayztFOSD0lmZg3mz3WRoKPRzvZkxqqD3eh8gHsk7_dSpdz2Wz9kFv5XQnNEMWOnM/s1600/noxdo_blogspot_com_Search-icon1.png&quot']);" rel="nofollow">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQD0IIH0fVQ0feB6IzWjWjK2vnQ5-3J2hM-7M56LP6S7LOuuKf0aF6ORXPjabzjovQ2iu4OwZVUhdJhFregYGx94LfXNxP7rmt4fKjjoSEKz1qQMly8Ec4Rgy145z9LAg1vAiL7OPwn3k/s20/Search-icon.png&quot</a>;) 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>

<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("<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIMrsHDRwv-hEDVBYGU86t2A5n07Ar9d9Nth3ShxAgCkE0Qro7TkYrfp_4NIPINs0DmDfyL6UptoSQ22EcqV9W7ie4J0w19oDCrliqIrfnIp9maMxMVCu_MyLXGO8x-N2iX-JxfpAOKaM/s1600/noxdo_blogspot_com_Search-icon2.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIMrsHDRwv-hEDVBYGU86t2A5n07Ar9d9Nth3ShxAgCkE0Qro7TkYrfp_4NIPINs0DmDfyL6UptoSQ22EcqV9W7ie4J0w19oDCrliqIrfnIp9maMxMVCu_MyLXGO8x-N2iX-JxfpAOKaM/s1600/noxdo_blogspot_com_Search-icon2.png&quot']);" rel="nofollow">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZDZuEVpqVuj8bgTFrVIxKiprY8bJw88sll71l1-l6HvX8jjtMQSvsfxpUCamHYh5cs7BxETjKFcZYoGFi_ABL6QmrVAdJxTgNR887SINg0C3-q-a5r0SXQNmoLpUJgl8rA9cV81-lN1p/s1600/searchicon.png&quot</a>;) 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>

<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>

<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8cKtFcTNlg-T04UZm08gkMpJ38uwdn3bzXincqCQbV7DkautafLuU9Y_XVS2LPMiI7ZftNZfhMktVF5pg71lWaA4JCnHONbDdREoKyxRJGoiv5_XATXZRbh1AeucqVwGIVw4P21gOao/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>

<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySvFEotFIY8IpzWgp4kSEU4YJEdovVBXmKO_GQ4gEvkvHrugQZlTu9dCr2_x67I4j5_jqtBVxn5XzqnDdc5X80ZBvz-EYouwrFMm8Ovv3UwV2abSvpoN-makRZltTIdHQNm6x8tty5kw/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=""/>
</form>
</div>

<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3WwGBwVP0BV3KRSookUU7czUZXFts2h4EkkqPCvsU45R3c9BxKN1YyU-LIGGI2m9e45cmEOthhtVmd8T2V_XgDo9Nz02kEqQ-yVURcxCrRq-WZhOfr5qtjfMkjaBt0PqNa6OY5rk5Srw/s1600/noxdo_blogspot_com_Search-icon5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=""/>
</form>
</div>

<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX0YDCo_osI-Qvv9gChNHLtJhXDmm6FHi058OEqJzAWj6BQjCjIWPe7wJpanQ2_dwdnBsSs30BjPhgnPlIlRijkFluMkbwY6jnwgau0fdkz9iYHujmlX0eZA_3WRy7PNOjB7Ic2KwlH8w/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>

style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIvUujzGTw4ctcIWeEqBC_frJsci28k99oowdSgqQ9giKmxEQ7shJQKutcQsW3gQh7xCD5egLd9x8fqnk9VpJjptGc5lF8Gy8JVe7b9A-afmWSlPKq0gznkGo_wykqLL6oDTmBIpgl3x12/s1600/searchbar.png) no-repeat;
width: 208px;
height: 29px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
color: #828282;
width: 70%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGUw0YKW5Qe-c84UnoSzdm3HUMKFV3v68QFMEO3AqvvFqqAXjnLgGNtBcRxMdM-QrrQEXBp9cVxkYudlPsQ2Bcu76AwMWIXwkTRcLO9Oue34XPCgu-2WBoeJvMmftpwFLZbLQc1NGY1vuS/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 21px;
height: 22px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwiwTiLuPQxc-qYDxF6a4p-citP7zXRLJWz7NFEJ4d6Eet49wpivOOAQzbfoKCf_u5S1hnNtiGjGYrCpY1CK72qXkGsCdntOZHWN7_7BgoXowfaeuhQ12L26vQUUo3I1VFz-n3eZJWu7Px/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwiwTiLuPQxc-qYDxF6a4p-citP7zXRLJWz7NFEJ4d6Eet49wpivOOAQzbfoKCf_u5S1hnNtiGjGYrCpY1CK72qXkGsCdntOZHWN7_7BgoXowfaeuhQ12L26vQUUo3I1VFz-n3eZJWu7Px/s1600/magnifier-hover.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRa_-d_ABOuhHppPSShqKNpLvHfZn6gXdgclzuXdm0SE2sCKjobC3-M8B7pL-fmw46T8OkXSiqZ4r-uZRU2f1WDWpX27kwNbPsjqBoQwYC3KEgoHl9-q1HxlXirP1Rg1WxBk-FN36XnVgq/s1600/search-box1.png) no-repeat;
width: 250px;
height: 65px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
padding: 5px 0px 5px 20px;
margin: 10px 15px 0px 0px;
border-width: 0px;
font-family: "Brush Script MT", cursive;
font-size: 12px;
color: #595959;
width: 65%;
font-weight: bold;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiieYtdJ5mKHMt88iDQx3mtdHnmHZt-mW7PrZ4ywpOW2h8Je2OtRZ91TOujGzreafnnqJZDcsgUdqYbFOYCpcCeJCoApyujTSApS0p0iC0fYN21bzofsc7mTLMqnC5N452aoenUsZx9Z4/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-top: 10px;
width: 19px;
height: 25px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLLE6pU7zS__VLtcsP3HjAGBypunh4lR89G4upJV_WzFhc-LTc_p9aBWMpdrDQVqEj7dAldmyyXkPFCJ5HWcwcCiy-_8vxbkmdtO35y5IpUjdUXcw3Jq7oaAcXNWEVFyG8soRVi5Jlz1H/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLLE6pU7zS__VLtcsP3HjAGBypunh4lR89G4upJV_WzFhc-LTc_p9aBWMpdrDQVqEj7dAldmyyXkPFCJ5HWcwcCiy-_8vxbkmdtO35y5IpUjdUXcw3Jq7oaAcXNWEVFyG8soRVi5Jlz1H/s1600/magnifier-hover.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
<input id="button-submit" type="submit" value="" />
</form>

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI7dG2nK37vfNB8WEm_taIuhnYP5mUR2MzHyF90vDV3EGGu4TK8Rgx8E9DvY-UGKUJFUXW4HxQiRZH9WOhb21A6SxvFlxhmHv71shjQfRruGlXkrOqYFMsm0BhZhA8_zvyOHHIeROa9Cub/s1600/search-box.png) no-repeat;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #f2f2f2 !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0-svmpbNCHR7Uc3Mh_Vvp_TyG8hLI6cxhqUPT3kF-xYukzcLLl7jr_xPgM-6KPMcAKPUQntdCthOH4qO1olV-CqtJd2R_8WydJsUcouc8iE7Unn3b1pDmr300MKSQDrXVt9xxGGNhKB_I/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjckbQ_YB2SUqaSVO1abU3OkqDuPiHcYUD8Ys_STwLuSLFd8YajCaF4mr11nAozWvyD0nXYwOpSx7XtI49GfkV_cFtR6S6Rmb4koCp4Y15D8WiHrcjpsN23FoDD_d-cFCIRaMj1kkI9wxoG/s1600/search-icon-hover.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

I hope this post become useful for you.

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.

Add 15 Stylish Search Box in Blogger blog

How to Add Stylish Search box in Blogger blog

About Unknown

0 comments:

Post a Comment

Add 15 Stylish Search Box in Blogger blog

How to Add Stylish Search box in Blogger blog

About Unknown

RELATED POSTS

0 comments:

Post a Comment