Add Custom Search Box Inside Blogger Navigation Menu

You may thought to add search box in sidebar,header,above post and just confused !and make a new idea to make how to add custom search box inside navigation menu.This look style and attractive to your template and lot of place instead of blogger sidebar and header.The below tutorial explains how to show the search box inside menu.    
                                                                          Live Demo  ▼                                                              

Part1
1.Go to google custom search engine
2.Read this How to create google custom search engine
3.Get id inside your created search engine code.It looks as below

006442829222345501157:setkk2xdqoi
If you adsense code with custom search box look like
partner-pub-44091594fdfd4980:sl5redh1f

4.Add your id in below code and copy it in notepad

<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='add Custom search id'/>
<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>

Part2

1.Now go to Blogger>> Template

2.Back up template

3.Edit Html>>Tick at  Expand widgets

4.look for below 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'>

5.Paste the saved notepad code in above code and after <ul>.

6.Save template and done.