expandable search box like wordpress for blogger

Expandable search boxes with Hover effect

Today i,m going to tell you that how to add expandable search box with or without hover effect. these search boxes are very beautiful and cool to use . These search boxes are made for wordpress site i,m sure you seen them on one of the wordpress blog but you can add them to blogger . It makes your blog more beautiful and creative it is user friendly and it does not have any effect on your blogs speed .

You can watch live demo of these search boxes in my demo blog

Now we are going to add this in blogger Follow my steps.

Steps

1. Goto your blogger account

2. goto page elements and add a gadget

3. select html/javascript and paste below code in it .

For search box with hover effect

<style>
#apple #search {

}

#apple #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_L8LSNxRHS9gt9ze07jOiDi-POVVVQ8gRWNmdsxXBDX0oq0el3tgbGGXOPl9D6Gmv5GGRi-ohVai5eyAzsgvLyf_GnkXSaCpj2VhVQytXq6CDd097yCqgXcIDcLSWZXllYS5nU5OTZW4/s1600/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#apple #search input[type="text"]:focus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwbJcnZbzKfF3jCaLTpJYcA-GDDZtESQ8mG10JJIj1tbRNHwnlRo3O7hfdR_wJ2NJGG95HxbxKJbjq6bWLOGHbKXYWYNdfYo7DyFrewvhWrcR0tUO3EMaZfingEFkTDO3rr9uoDutrsuI/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
</style>
<div id="apple">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>

For Search box without hover effect (white)

<style>
#white #search {

}

#white #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_L8LSNxRHS9gt9ze07jOiDi-POVVVQ8gRWNmdsxXBDX0oq0el3tgbGGXOPl9D6Gmv5GGRi-ohVai5eyAzsgvLyf_GnkXSaCpj2VhVQytXq6CDd097yCqgXcIDcLSWZXllYS5nU5OTZW4/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#white #search input[type="text"]:focus {
width: 200px;
}
</style>
<div id="white">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>

For search box without hover effect(dark)

<style>
#dark #search {

}

#dark #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwbJcnZbzKfF3jCaLTpJYcA-GDDZtESQ8mG10JJIj1tbRNHwnlRo3O7hfdR_wJ2NJGG95HxbxKJbjq6bWLOGHbKXYWYNdfYo7DyFrewvhWrcR0tUO3EMaZfingEFkTDO3rr9uoDutrsuI/s1600/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#dark #search input[type="text"]:focus {
width: 200px;
}
</style>
<div id="dark">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>