5 really simple and awesome search box for blogger blogs

Who does not want to have a search box on their blog, even your blog visitors wants you to have one because it helps them to find what they are looking for on your blog. To be honest, there are “lots” of blog post on search box out there but I can surely say that mine is a bit easy to use and edit because what I have created is only the customized version of our simple and plain search box which was customized using only CSS. The basic version will look like the below image which you can use if you wish to because I will give you the code for that one too.
Code for the above plain one:-

<form action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" size="20" type="text" value="Need Something?" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> <input id="searchButton" value="Search" type="submit"/>
</form>

That above one was created using basic HTML which has no CSS at all. Many bloggers wants that for their blog even I had this plain one on my blogger blog. You can have it if you wish.
Now here comes the CSS mixed versions of it. You can find the code below the images-
(1) Blue Version-
Here’s the full code for the blue version-

<form action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" size="20" type="text" value="Need Something?" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> <input id="searchButton" value="Search" type="submit"/>
</form><style>
input[type=text]
{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:2px solid #124d77;
font-family:Verdana;
padding:6px 11px;
}
input[type=text]:focus
{
box-shadow:inset 0px 2px 2px #444;
-webkit-box-shadow:inset 0px 2px 2px #444;
-moz-box-shadow:inset 0px 2px 2px #444;
}
input[type=submit]
{
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
background-color:#007dc1;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #124d77;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:13px;
padding:6px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
}
input[type=submit]:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
background-color:#0061a7;
}
</style>

---

(2) Light Blue Version-
Here’s the full code for the light blue version-

<form action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" size="20" type="text" value="Need Something?" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> <input id="searchButton" value="Search" type="submit"/>
</form><style>
input[type=text]
{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:2px solid #79bbff;
font-family:Verdana;
padding:12px 24px;
}
input[type=text]:focus
{
box-shadow:inset 0px 2px 2px #d2d2d2;
-webkit-box-shadow:inset 0px 2px 2px #d2d2d2;
-moz-box-shadow:inset 0px 2px 2px #d2d2d2;
}
input[type=submit]
{
-moz-box-shadow: 3px 4px 0px 0px #1564ad;
-webkit-box-shadow: 3px 4px 0px 0px #1564ad;
box-shadow: 3px 4px 0px 0px #1564ad;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
background-color:#79bbff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #337bc4;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
font-weight:bold;
padding:8px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}
input[type=submit]:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background-color:#378de5;
}
</style>

---

(3) Green Version-
Here’s the full code for the green version-

<form action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" size="20" type="text" value="Need Something?" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> <input id="searchButton" value="Search" type="submit"/>
</form><style>
input[type=text]
{
border:2px solid #74ad5a;
font-family:Verdana;
padding:6px 12px;
}
input[type=text]:focus
{
box-shadow:inset 0px 2px 2px #ccc;
-webkit-box-shadow:inset 0px 2px 2px #ccc;
-moz-box-shadow:inset 0px 2px 2px #ccc;
}
input[type=submit]
{
-moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
-webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
box-shadow:inset 0px 1px 0px 0px #9acc85;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
background-color:#74ad5a;
border:1px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:13px;
font-weight:bold;
padding:6px 12px;
text-decoration:none;
}
input[type=submit]:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
background-color:#68a54b;
}
</style>

---

(4) Red Round Version-
Here’s the full code for the red round version-

<form action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" size="20" type="text" value="Need Something?" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> <input id="searchButton" value="Search" type="submit"/>
</form><style>
input[type=text]
{
-moz-border-radius:18px;
-webkit-border-radius:18px;
border-radius:18px;
border:2px solid #c62d1f;
font-family:Verdana;
padding:10px 23px;
}
input[type=text]:focus
{
box-shadow:inset 0px 3px 3px #ccc;
-webkit-box-shadow:inset 0px 3px 3px #ccc;
-moz-box-shadow:inset 0px 3px 3px #ccc;
}
input[type=submit]
{
-moz-box-shadow: 3px 4px 0px 0px #8a2a21;
-webkit-box-shadow: 3px 4px 0px 0px #8a2a21;
box-shadow: 3px 4px 0px 0px #8a2a21;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24437));
background:-moz-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-webkit-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-o-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-ms-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
background-color:#c62d1f;
-moz-border-radius:18px;
-webkit-border-radius:18px;
border-radius:18px;
border:1px solid #d02718;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:17px;
padding:7px 23px;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;
}
input[type=submit]:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #c62d1f));
background:-moz-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-webkit-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-o-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-ms-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
background-color:#f24437;
}
</style>

---

(5) Pink Version-
Here’s the full code for the pink version-

<form action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" size="20" type="text" value="Need Something?" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> <input id="searchButton" value="Search" type="submit"/>
</form><style>
input[type=text]
{
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:2px solid #ff5bb0;
font-family:Verdana;
padding:7px 20px;
}
input[type=text]:focus
{
box-shadow:inset 0px 3px 3px #ccc;
-webkit-box-shadow:inset 0px 3px 3px #ccc;
-moz-box-shadow:inset 0px 3px 3px #ccc;
}
input[type=submit]
{
-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
box-shadow:inset 0px 1px 0px 0px #fbafe3;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d));
background:-moz-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
background:-webkit-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
background:-o-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
background:-ms-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
background:linear-gradient(to bottom, #ff5bb0 5%, #ef027d 100%);
background-color:#ff5bb0;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #ee1eb5;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:15px;
font-weight:bold;
padding:6px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #c70067;
}
input[type=submit]:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0));
background:-moz-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
background:-webkit-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
background:-o-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
background:-ms-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
background:linear-gradient(to bottom, #ef027d 5%, #ff5bb0 100%);
background-color:#ef027d;
}
</style>

Instructions to add it on your blogger blog–
Adding this search box on your blogger blog is very easy. Take a look at the below steps-

• Go to Blogger- Layout- Add a Gadget.
• Copy and paste the respective codes inside the content area.
• That’s it.

Note: The live version of those search boxes are a bit different and better than those static images because I have also used the “Hover” and “Focus” CSS selectors.