WordPress like Expandable search box will give a funky look to your blogger blog .Normally this type of search widgets you will see on WordPress sites.And this code will let you incorporate this WordPress search box in your blogger blog.
Steps to add expandable search box in Blogger
1.Go to Blogger Dashboard > Template > Edit HTML
2.Search (Ctrl+F) for the line ]]></b:skin> .
3.Now Copy the below code and paste it before the red highlighted line.
b.You can also change the default size of the search box by altering width:180px; and can change the expandable length by changing the width:210px;
c.To change the border color you can replace this line (border-color:#0b5394#0b5394 #0b5394#0b5394;) with your desired color codes.
4.Now go to Blogger > Layout>Select HTML/JavaScript widget. Paste the code below inside it .
5.Click on save and you are done:)
/*******************************************
SEARCHBAR-http://genuinecontent.blogspot.com
********************************************/
#searchform{
float:right;
margin: -5px 20px 0 0;
SEARCHBAR-http://genuinecontent.blogspot.com
********************************************/
#searchform{
float:right;
margin: -5px 20px 0 0;
}
#searchbox{
height: 24px;
text-align:center;
padding-top: 5px;
background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NpgJ8nPVv8pDtyU7TLGd6Qm3BqU49evTMFiLMhZth6suBYJ7QN4Jc92oWY9Jza8ATtTkO5VtfMv6OAMgjIJEPxQgfV8VXk2Id6Z8IeLdY1vK6NzVdTo07HGt1NgWpgyxzi65eGzRPBVq/s0/subtle_freckles.png.png) repeat;
font-size:small;
color:#0b5394;
padding:1px 2px;
width:180px;
border-width:2px;
border-style:solid;
border-color:#0b5394 #0b5394 #0b5394#0b5394;
outline:none;
float:right;margin-right:5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
height: 24px;
text-align:center;
padding-top: 5px;
background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NpgJ8nPVv8pDtyU7TLGd6Qm3BqU49evTMFiLMhZth6suBYJ7QN4Jc92oWY9Jza8ATtTkO5VtfMv6OAMgjIJEPxQgfV8VXk2Id6Z8IeLdY1vK6NzVdTo07HGt1NgWpgyxzi65eGzRPBVq/s0/subtle_freckles.png.png) repeat;
font-size:small;
color:#0b5394;
padding:1px 2px;
width:180px;
border-width:2px;
border-style:solid;
border-color:#0b5394 #0b5394 #0b5394#0b5394;
outline:none;
float:right;margin-right:5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px;;
border-radius:8px 8px 8px 8px;
}
#searchbox:focus{
width:210px;
color:#000000;
}
-khtml-border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px;;
border-radius:8px 8px 8px 8px;
}
#searchbox:focus{
width:210px;
color:#000000;
}
Customization:
a.If you want to change the background image for the search box then just replace the existing image URL (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NpgJ8nPVv8pDtyU7TLGd6Qm3BqU49evTMFiLMhZth6suBYJ7QN4Jc92oWY9Jza8ATtTkO5VtfMv6OAMgjIJEPxQgfV8VXk2Id6Z8IeLdY1vK6NzVdTo07HGt1NgWpgyxzi65eGzRPBVq/s0/subtle_freckles.png.png )with your image URL.And if dont want ant image background then remove this line from the code url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NpgJ8nPVv8pDtyU7TLGd6Qm3BqU49evTMFiLMhZth6suBYJ7QN4Jc92oWY9Jza8ATtTkO5VtfMv6OAMgjIJEPxQgfV8VXk2Id6Z8IeLdY1vK6NzVdTo07HGt1NgWpgyxzi65eGzRPBVq/s0/subtle_freckles.png.png) repeat .b.You can also change the default size of the search box by altering width:180px; and can change the expandable length by changing the width:210px;
c.To change the border color you can replace this line (border-color:#0b5394#0b5394 #0b5394#0b5394;) with your desired color codes.
4.Now go to Blogger > Layout>Select HTML/JavaScript widget. Paste the code below inside it .
<li><form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='240' name='q' onblur='if (this.value == "") {this.value = "Search Here...";}' onfocus='if (this.value == "Search Here...") {this.value = ""}' type='text' value='Search Here...'/>
</form> </li>
<input id='searchbox' maxlength='240' name='q' onblur='if (this.value == "") {this.value = "Search Here...";}' onfocus='if (this.value == "Search Here...") {this.value = ""}' type='text' value='Search Here...'/>
</form> </li>
5.Click on save and you are done:)