Friday 27 November 2009

Add blogger search box


Although most of the customized blogger templates has embedded  blogger search with the template.How ever you want to include a search box in the main area of the template like above or below the post area or in the sidebar OR it might be possible that your template does not has a blogger search embedded in that case you can add your own search box and place it anywhere in your blog.

Under layout >> page element tab "Click add a gadget " on the suitable place where you want to add blogger search and choose "Html /javascripts".

Below are the certain Html codes you can use from and add to your Html/javascripts popup window.

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>YOUR BLOG NAME<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Remember to change  YOUR BLOG URL and YOUR BLOG NAME and you can change the search buton to say anything like Go! Hit me! bu changing the value value="Search"
save your code Refresh and see your page.

maxlength="255" shows that the user can enter only up to 255 character to search  Whereas a width size="30"  will increase the width of your search box.

For fun if you want to add image instead of search image.
Just use this code.

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>YOUR BLOG NAME<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" type="image" src="IMAGE URL" align="top"/>
</form></p>

And replace IMAGE URL with url of your image.
 While it is alright to replace the button of your Blogger search box, you may not want to do that with the Google search box since their T.O.S. disallows any alteration of their code.

No comments:

Post a Comment