Skip to main content

How To : Add a Search Box to Your Blog (Header)

[Search.jpg]

One of the important widgets in a blog is of course a search box you may leave the archive widget, but do not miss a search box. With increasing number of posts, it is of course not possible for your readers to find a post from the never ending list in your blog archive, in that case only a search box can help them to find what they want.

According to my own blog statistics, out of every 500 page impressions at least 50 impressions belong to internal blog search.

In case you want to display the search box in the Header region, just like BloggerStop, follow these instructions:

Log in to Blogger -> Layout -> Edit HTML and mark the 'Expand Widget Templates' box.
Now find (CTRL+F) this:


#header {
.....
.....
.....
}

And immediately BELOW/AFTER it, paste this code:

#header .searchbox {
text-align:$endSide; //$endSide = Right & $startSide = Left
margin: 25px; // Distance from right or left side
}

Now search these lines:

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>

Add the blue code BELOW it, like this:

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
<div class='searchbox'>
<form action='http://chindaara.blogspot.com/search' id='searchthis' method='get' style='display:inline;'>
<input id='b-query' maxlength='255' name='q' size='20' type='text'/>
<input id='b-searchbtn' type='submit' value='Search'/>
</form></div>

Comments