How To Add Expandable Search Box In Blogger Blog

Posted by Unknown 0 comments
 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.

expandable search box for 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.


/*******************************************
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(http://1.bp.blogspot.com/-BgsRT-V0PHY/T8VFaGAhbrI/AAAAAAAABhM/WojsSqsJns8/s000/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;
}


Customization:

 a.If you want to change the background image for the search box then just replace the existing image URL (http://1.bp.blogspot.com/-BgsRT-V0PHY/T8VFaGAhbrI/AAAAAAAABhM/WojsSqsJns8/s000/subtle_freckles.png.png )with your image URL.And if dont want ant image background then remove this line from the code url(http://1.bp.blogspot.com/-BgsRT-V0PHY/T8VFaGAhbrI/AAAAAAAABhM/WojsSqsJns8/s000/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 == &quot;&quot;) {this.value = &quot;Search Here...&quot;;}' onfocus='if (this.value == &quot;Search Here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search Here...'/>
</form>  </li>

5.Click on save and you are done:)