The Google Navigation bar at the top of your Blogger blogs has an embedded search box. However, you may want to include a similar box in the main body of your blog (like what I have done), or the sidebar. Other than the convenience for users, the added advantage is that unlike Google search box, the search results of this Blogger.com search box appear in the main body of your Blog.
Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.
There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-
<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> |
|---|
Remember to change
YOUR BLOG URL to the URL or web address of your Blog. Also, change the
NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.
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 above example of a
width size="20" and
value="Hit" will give you this:-
Whereas a
width size="30" and
value="Go" will give you this:-
The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.
Image instead of Search button
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>
|
|---|
Remember to insert into the code the
IMAGE URL, where your picture is 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. For more examples on alignment of images, you may refer to the article Hyperlinks and Image Links (II).
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.
WordPress is one of the best, and most flexible blogging platforms. As well as distributing their blogging software, they also offer free hosting at wordpress.com.
Blogger.com is probbably the most popular free blogging platform. It's easy to set up, and easy to start blogging.
If you have a Microsoft .Net Passport account, this may be the easiest way to go. MSN Spaces is easy to use and offers most of the features found elsewhere.
Yahoo's take on free bloggig. Enables users to bring together all of their personal information and share it with their friends, family, and others.
If you already have an aol account or screen name, Aol Journals may be the easiest way for you to start a blog, and get started.
