How to put a Search Box in your Blog

Ok, by request of our reader NJ_9, we are going to put a search box in the menu bar. You can see how it looks like watching the search box above right of this post.

A search box it's very useful if you have more than 50 posts, your readers will have an easy way to find what they are looking for.

Create a Search Engine.

First of all you have to create a Custom Search Engine:

Go to Google Custom Search to create one. Log in with your google account and refill the form.

Don't worry, it's easy, put the tittle, description, choose the language and in the field "Sites to search" put the websites that you want. If the search box it's only for your blog just enter the url of your blog, if you want to  search in google too, add a new line with de url of google www.google.com.

You can add all the urls that you want.

Then check the "Standard Edition" and click on "Next".

Now you can choose a style and customize it. Click on the "Next" button when you have finished and you will get the code to paste in your blog.

Put the Code in your Blog.

In blogger go to Layout>Edit HTML and check the "expand widget templates" box.

If your navigation bar is made of pages gadget look for this code:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>

THE CODE HERE

<b:loop values='data:links' var='link'>

And paste the code of the search box replacing the line "THE CODE HERE".

If your navigation bar is made of linklist gadget, Search the <div id="navibar"> tag and Immediately after paste the code.

That's it, we have done! Enjoy!