2 Navigation Menu And Search Box With CSS In Blogger

Want to have a navigation menu with search box at the right side in your blog as you can see in the above image, so here are the steps below for you to follow:

First of all, log on to your blogger account and navigate through Layout > Edit Html > Download Full Template and have a backup of your current template and then check the Expand Full Widget Template.

Now, download the css code from here and paste it just above the ]]></b:skin> section in your template.

After the above step press Ctrl+F and find <div id='content-wrapper'> and copy & paste the following code just above it.

Code:

<div style='clear: both;'/>
<div id='navmenubar-wrapper'>
<b:section class='navmenubar' id='navmenubar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='navmenubar' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<table width='100%'>
<tr>
<td align='left'><li><b:loop values='data:links' var='link'>
<a expr:href='data:link.target'><data:link.name/></a>
</b:loop></li></td><td align='right'>&lt;form action=&#39;/search&#39; id=&#39;searchform&#39; method=&#39;get&#39;&gt; &lt;input id=&#39;searchbox&#39; name=&#39;s&#39; onblur=&#39;if (this.value == &#39;&#39;) {this.value = &#39;Search this site...&#39;;}&#39; onfocus=&#39;if (this.value == &#39;Search this site...&#39;) {this.value = &#39;&#39;;}&#39; type=&#39;text&#39; value=&#39;Search this site...&#39;/&gt; &lt;input id=&#39;search_button&#39; class=&#39;search_button&#39;type=&#39;submit&#39; value=&#39;&#39;/&gt;&lt;/form&gt;</td>
</tr>
</table>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Next step is to check the preview and if all is OK, then save your template and move back to Layout and there you will see a new widget layout with title 'navmenubar' just click on its edit button and create links as per your need (see the images below).

Wait...its not over yet! I know that you are happy to see a good looking menu bar in your blog along with search box but if you want to change search button from the default one here are some bonus buttons you can use, hope it will put some more smile on your face.

Download these buttons from here.

Now to replace the default search button with one of these bonus buttons, first of all you will have to upload these downloaded buttons to some image hosting sites like photobucket.com, pict.com etc. or any existing one you would be using and then you have to make some changes in CSS code so go back to Edit Html and press Ctrl+F and find 'search_button' code in CSS part and replace the Url (see the highlighted part in image below).