Search Box for Blogger Blogspot

Under Template->Page Elements tab, click “Add a Page Element”. Select “HTML/JavaScript”.

Copy Paste this searchbox code in the new windows appeared.

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

Change the YOUR BLOG URL to URL of your blog. And, change the NAME OF YOUR BLOG to the name with which you want to call your blog. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site” or any other.

You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.

Save the code and refresh your page.
If you want a longer or shorter search box, you can play around with the size. The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates the maximum number of character a user can enter in that particular search box and as far as i am concerned this is sufficient and need not be changed.

Search Tips for New Bloggers

Just for the fun of it, if you want readers to click an image instead of a button, you will first need to do up a small picture. You can also resize a picture you already have with photo editing tools like Google's Picasa. After creating a picture, upload it onto a free server like GooglePages or Google Groups, or other free hosts that offer direct links to the image files. Take note of this IMAGE URL.

The HTML code to insert is this:-

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<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>

Replace the IMAGE URL with the URL of the image you have just uploaded.You can align the image to the top, bottom or set a horizontal space between the bar and the image by using a hspace tag.

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.

Bookmark this post:

I'm reading: Search Box for Blogger Blogspot ~

Related Posts :