Add Custom Search box to navigation/menu bar

This tutorial will show you how to add a Google Custom Search box to horizontal navigation bar, just like what you see here in Blogger Sentral. (Google Custom Search enables you to search within a collection of blogs or websites of your choice).

 

Step 1. Create your custom search engine

For the custom search to work you need a Google custom search engine to go with the search box. Follow the steps below to create one.

Note: This tutorial is not applicable to Search Box gadget added via Design > Page Elements.

1. Go to Google Custom Search to create a custom search engine.
2. If your are an Adsense publisher you can also use Adsense for search. 
3. Configure the search engine and get the code for the search box.
4. Look for the search engine unique ID in the code. It should look something like this: 006442829066104501157:setkk2xdqoi or this: partner-pub-4409159435154980:sle4z0smh1f
   

   We are only interested in this ID, the rest of the code is of no use.

 

Step 2. Create the search box

This is the code for the search box:

<!-- Google custom search box Start -by BloggerSentral.com -->
<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
<form action='http://www.google.com/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='partner-pub-4409159435154980:sle4z0smh1f'/>
<input type='text' name='q' size='35' />
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div>
<!-- Google custom search box End -->

Mar. 2011: Code updated to include Google Custom Search logo and search button.
Dec. 2010: Code update.

1. Replace the value of value attribute in line 4 with the Search engine unique ID from Step 1.3.
2. To make the search results appear in a new window, just add target="_blank" before the closing bracket in line 3.
3. You can modify the search text box width by changing the value of size attribute in line 5.

 

Step 3. Add search box to navigation bar

The steps below will place the search box on the right hand side of the bar.

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates check box on top right of the HTML window.
5. 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>
   PUT THE SEARCH BOX CODE HERE
   <b:loop values='data:links' var='link'>

6. Insert the search box code from Step 2 right after the <ul> line.
7. If your navigation bar is made of a LinkList gadget, look for LinkList (instead of PageList) in line 1.
   

   If you created your navigation bar using Blogger Sentral’s Creating navigation or menu tabs in Blogger tutorial, just add the search box code right after <div id="navibar"> line of the navigation tabs code.

8. Preview before saving.

Enjoy!