Expandable Search Box Like WordPress for Blogger

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.

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/AVvXsEjjqH5nHqAzzodVAwT5FJlqkwYcNbwT0bxVj5Z81S00IacfADQWLVMqcq4KTQqpYKOoVf1phpRscrcITaPQ2NOMT-OnUy2OmPSFObFXX4icafU_3pRgotOObZvP-Dopjwsi9koN6bBTDbQ/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/AVvXsEjkz60slmbZLj9YSui1ayBbTBN1Q2eMTKBRre7Sa5iHAe9VdDZcM-fD6oa3_kRSItYrfbCkt7pp0rtUWM6kHKB66Iqv5KkxJBWSbK8shyphenhyphenmxSjGvcbL-T8nwXkgD2Zo1xABiVWWLKAJDpIA/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/AVvXsEjjqH5nHqAzzodVAwT5FJlqkwYcNbwT0bxVj5Z81S00IacfADQWLVMqcq4KTQqpYKOoVf1phpRscrcITaPQ2NOMT-OnUy2OmPSFObFXX4icafU_3pRgotOObZvP-Dopjwsi9koN6bBTDbQ/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/AVvXsEjkz60slmbZLj9YSui1ayBbTBN1Q2eMTKBRre7Sa5iHAe9VdDZcM-fD6oa3_kRSItYrfbCkt7pp0rtUWM6kHKB66Iqv5KkxJBWSbK8shyphenhyphenmxSjGvcbL-T8nwXkgD2Zo1xABiVWWLKAJDpIA/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>

Now Save It and its Done

Thank You