Adding Google Custom Search Engine Box Beside Menu Bar/ Navigation Bar

In my previous article about adding google custom search engine box, we put it  in every post titles but in

this tutorial ,  we will show you how to add  Google Custom Search Engine Box beside your horizontal navigation bar, making your blog more professional in looks. Google Custom Search enables you to search within a collection of blogs or websites of your choice. So, let us now go with process!

Adding Google Custom Search Engine Box Beside Menu Bar/ Navigation Bar

Step 1. Create your custom search engine
 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. Get the code  of your  search engine and pick - up your  unique ID  in the code { usually it is located at the  third line (the text in red below) of  your google search engine code}.
Example:

<script>

  (function() {

    var cx = '014987083883224014161:toggavkxnxo';

    var gcse = document.createElement('script');

    gcse.type = 'text/javascript';

    gcse.async = true;

    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

        '//www.google.com/cse/cse.js?cx=' + cx;

Or simply click the Search Engine ID button to get your google search engine ID as shown in the photo below

Step 2. Create the search box
 The following is the code of your search box.

<!-- Google custom search box Start -by Bloggingtipsandtrix.blogspot.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'
target="_blank"><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 -->

1. Replace the value in bolded red texts in line 4 - 5 with  your Search engine unique ID from Step 1.3.

2. You can customize the search text box width by changing the value of size attribute in line 6.

Step 3. Add search box to navigation bar
1. Go to Blogger Dashboard >> Lay- out
2. Click the box where you put your menu bar/tabs codes
3. Just add the search box code right after <div id="navibar"> line of the navigation tabs code as shown  below or (you can put  the search box also above the '<ul>' tag).

<div id='bbtnavbar'>Place your search engine code here ( In Step 2)

      <ul id='bttnav'>
       <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Templates</a>
            <ul>
                <li><a href='#'>Hacks</a></li>
                <li><a href='#'>Downloads</a></li>
                <li><a href='#'>Advertise</a></li>
              </ul>
        </li>



      </ul>
    </div>

4. Preview before saving.

Enjoy!
Credits goes to Bloggersentral with little modification from me.

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook