Add a Search Box to Your Blog (Header)

This Post is requested by Kpopster-kith from KPopSites.

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.

Adding a search box to your blog is very easy. Simply go to Layout and click on Add a Gadget, and select it as Search Box.
But just in case you want to edit/modify the search box, then you should better add it as an HTML element.

So go to Blogger -> Layout -> click on Add a Gadget and select it as HTML/JavaScript

and paste this code in to it:

<div>
<form action='http://bloggerstop.net/search' id='searchthis' method='get' style='display:inline;'>
<span>Search This Blog</span>
<input id='b-query' maxlength='255' name='q' size='20' type='text'/>
<input id='b-searchbtn' type='submit' value='Search'/>
</form>
</div>

NOTE: Replace the code in RED with your blog's address. You may customize the widget by modifying the text in BLUE.
That's it save the widget.

---

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://bloggerstop.net/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>

That's it, save the widget and let your visitors freely roam around your blog !

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Google Facebook Twitter More

• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Related Posts

• undefinedundefined
• undefinedundefined
• undefinedundefined
• undefinedundefined