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 !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

18 comments

Write comments
Anonymous
May 31, 2009 8:40 AM delete

that's a very great hack. i have already a search box integrated in the template, but i remove it and replace it by google search, and when i search for something in google i never found it, now i will remove the google search and do this tip !

one question? i have subsribed by email but i always recieve the updates 4 or 5 days later? is there any way to fix this?

Reply
avatar
May 31, 2009 9:03 AM delete

Do you mean you subscribed to BloggerStop or is it any other blog ?
Anyways, if the updates aren't coming instantly, then you may better follow the blog through 'Google Friend Connect', so the updates will instantly appear in your blogger dashboard.

Reply
avatar
Anonymous
May 31, 2009 8:39 PM delete

yes i subscribed by email it's better than google friend, or rss readers or any thing elese

Reply
avatar
June 01, 2009 9:27 AM delete

Try FeedBlitz, and please do use some name, and a link back to your blog, to make the conversation more meaningful ;)

Reply
avatar
June 01, 2009 9:23 PM delete

sai,

sorry for bothering again but nothing happened when i tried it. :(

Reply
avatar
June 02, 2009 9:35 AM delete

okay...lets go step by step...

first add the search box anywhere else in your blog (not in the header), and tell me if you were successful in doing that !

Reply
avatar
June 03, 2009 2:09 PM delete

Try it now kith, there were some glitches in the code, which I have corrected now.
Thnks for letting me know your problem.

Reply
avatar
November 30, 2009 6:04 AM delete

increase size from 20 to something like 50.

Reply
avatar
July 03, 2010 6:20 AM delete

bro plz help me my search box function is not working actually when i search something then it shows no post matching your querry...

Reply
avatar
July 03, 2010 11:00 AM delete

That may be because your blog is quite new and so it will take time to index your blog completely.
PS: You may try a search widget from Lijit.com as well.

Reply
avatar
d
November 01, 2010 7:02 AM delete

Hi,

You have a 1st type of search box code to add in HTML gadget. In that code I want to do a modification. In the code shall I cut the tag [div] at the starting positon and the tag [/div] at the ending position? I have a purpose to cut both of these tags...If I cut these 2 tags will it affect the search box in some way?

Reply
avatar
November 02, 2010 8:25 AM delete

have no idea why this isnt working. theres no error whatsoever but the box just wont appear. Any idea?

Reply
avatar
October 09, 2011 6:59 AM delete

Worked wonderfully !!!!!!!!!!!! ;)

Reply
avatar
May 24, 2012 10:17 AM delete

Sir thanks for this widget. One thing i want to ask is can i take this widget on the right upper side of the header instead of bottom right. My email add is parthasarathi108@gmail.com

Reply
avatar
May 24, 2012 11:46 AM delete

Thanks for the widget, it works but when i want to insert the google search button the button appears below. Can the google search button also be placed in the same position? My email add is parthasarathi108@gmail.com

Reply
avatar
September 17, 2012 3:24 PM delete

THANKS MAN IT WORKS GREAT
BUT CAN YOU MAKE IT MORE STYLISH LIKE BLACKISH IN COLOUR

Reply
avatar
May 07, 2013 4:25 AM delete

Excellent, what a website it is! This webpage provides valuable facts to us, keep it up.
My site - hindi sms


Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon