Add a Search Box to Your Blog (Header)

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 !

Leave a Reply

18 Comments on "Add a Search Box to Your Blog (Header)"

Notify of
avatar
Sort by:   newest | oldest | most voted
Anonymous
Guest

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?

View Comment
Divya Sai
Guest

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.

View Comment
Anonymous
Guest

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

View Comment
Divya Sai
Guest

Try FeedBlitz, and please do use some name, and a link back to your blog, to make the conversation more meaningful πŸ˜‰

View Comment
kpopster - K
Guest

sai,

sorry for bothering again but nothing happened when i tried it. πŸ™

View Comment
Divya Sai
Guest

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 !

View Comment
Divya Sai
Guest

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

View Comment
Rabih Zein
Guest

how to change the width?

View Comment
Sai @ Blogger Widgets
Guest

increase size from 20 to something like 50.

View Comment
hello
Guest

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

View Comment
Sai - Blogger Widgets
Guest

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.

View Comment
d
Guest

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?

View Comment
ARCβ„’
Guest

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

View Comment
Shipsocker
Guest

Worked wonderfully !!!!!!!!!!!! πŸ˜‰

View Comment
Partha Dutta Bhowmick
Guest

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

View Comment
Partha Dutta Bhowmick
Guest

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

View Comment
saiket banerjee
Guest

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

View Comment
mobile sms
Guest

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

View Comment
wpDiscuz