Home / blogging / 12 well customised search box codes for your blogger sites

12 well customised search box codes for your blogger sites

05:48:00 blogging Edit

The search box is a very nice feature that must not be omitted in any website irrespective of the blogging niche. it help visitors for easy navigation and also finding there desires by just typing few keywords or full title .

The search box not only engage users but also make website look more professional and nice in design .

Though there are thousands of search boxes according to individuals customisation but all the same they perform the search function. In this post am going to show you 12 nice looking and well customised search box codes you can use for your blogger site.

How to set Search Box to your blogspot site

Simply login your blogger admin dashboard and click on Layout then select add gadget then click on HTML/JavaScript and paste any of the search box codes to get your search ready

<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>
#MBBOldSearch {
display: block;
clear: both;
margin: 10px 0;
}
#MBBOldSearch #MBBSinput {
background: url("<a href="http://4.
bp.blogspot.com/-C7mh2vX4gp4/Ue6-L3
iTnXI/AAAAAAAAAhI/-K6xVaVoM1g/s1600/
noxdo_blogspot_com_Search-icon.png&
quot" onclick="javascript:_gaq.push
(['_trackEvent','outbound-article','
http://4.bp.blogspot.com/-dBqo8V2
RpwU/Ue6_Nlt06CI/AAAAAAAAAhU/2
yJEBGZmeWg/s1600/noxdo_blogspot_com_
Search-icon1.png"']);" rel="
nofollow">http://2.bp.blogspot.com/-
Q-Ejkmx-Ki4/Teem3RZlpqI/AAAAAAAAA40/
_p6u9Xpgs7c/s20/Search-icon.png"
</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, #4d
90fe 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, #357
AE8);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, #4d
90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0,
0.1);}
#simg {
background: url("<a href="http://3.
bp.blogspot.com/-rBTMRhkUv5A/Ue6_
qllr4lI/AAAAAAAAAhc/Hbq9V3tFvqo/s
1600/noxdo_blogspot_com_Search-icon2
.png"" onclick="javascript:_gaq.
push(['_trackEvent','outbound-article
','http://3.bp.blogspot.com/-
rBTMRhkUv5A/Ue6_qllr4lI/AAAAAAAAAhc/
Hbq9V3tFvqo/s1600/noxdo_blogspot_com
_Search-icon2.png"']);" rel="
nofollow">http://3.bp.blogspot.com/-
63J57J-qaOM/UUH3C5D53uI/AAAAAAAAAFM/
2kRDRiGrl5Y/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 #C1
C1C1 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: 17
px;
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: 17
px;
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 -1
px 0 rgba(0,0,0,.3); width: 84px;
outline: none;
border-radius: 30px; -webkit-border-
radius: 30px; -moz-border-radius: 30
px;
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>

You can also do further customisation to any of the above selected search boxes or let it be as already made.

Meet me on facebook

If you love this post share it!

About kennedy prosper

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.