Add a search bar to your navigation menu

Another highly requested tutorial for you today on adding a search bar to your navigation menu on Blogger. It’s a good way to integrate a few things into one navigation bar to save on space and help your readers find what they are looking for. My next tutorial will show you how to add social media icons to your navigation bar also so keep an eye out for that. As always if you have any questions, leave them below.

Always backup your blog before making changes

Find out how to backup your entire blog including your template here.

1. Search bar code

You can add this code anywhere on your blog to add a search bar or create your own code using Googles Custom Search.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" /></form>

2. How to add to Navigation bar

If you have a custom navigation bar like the one shown in my previous tutorials such as the drop down menu that can be styled using template designer then add the search bar code before the following code. To customise the search bar see step 3 below.

</ul> <!-- end navmenu -->

We’re adding it before </ul> so that it’s part of the list without being a list item <li> ... </li>. To learn about lists check out this beginners guide to HTML post.

If using pages gadget

If you’re using the pages gadget and you want to add a search bar to it, go to Template > Edit HTML > Jump to Widget > PageList1. Expand the code by clicking the arrows on the left beside the numbers and you’ll see something similar to the following. Add the search box code to the highlighted area.

<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'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + &quot;_select&quot;'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'><data:link.title/></option>
<b:else/>
<option expr:value='data:link.href'><data:link.title/></option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&amp;#9660;</span>

<b:else/>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
<!-- SEARCH BOX HERE -->
</ul>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

If using links gadget

If you’re using the link list gadget and you want to add a search bar to it, go to Template > Edit HTML > Jump to Widget > LinkList1. Expand the code by clicking the arrows on the left beside the numbers and you’ll see something similar to the following. Add the search box code to the highlighted area.

<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
<!-- SEARCH BOX HERE -->
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Styling the search box

To position it on the right of your navigation bar, go to Template > Edit HTML and find ]]></b:skin> and above that add the following

#searchThis {float: right;}

Style the search box using

#searchBox { }

and style the button using

#searchButton { }

To remove border from search box
Add to your CSS (Template > Edit HTML > above ]]></b:skin>)

#searchBox {appearance:none; -moz-appearance:none; -webkit-appearance: none; border: 0px;}

To add an image instead of the search button
Replace the following

<input id="searchButton" value="Go" type="submit" />

with the following

<input id="searchButton" value="Go" type="image" src="DIRECT IMAGE LINK" />

Replace DIRECT IMAGE LINK with the link to your image.