New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:

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}.

  (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:') +
        '//' + cx;

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

google search engine ID

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

<!-- Google custom search box Start -by -->
<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
<form action='' 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" />
<script type="text/javascript" src=";lang=en"></script>
<!-- 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'>
          <a href='#'>Home</a>
          <a href='#'>About</a>
          <a href='#'>Contact</a>
           <a href='#'>Templates</a>
                <li><a href='#'>Hacks</a></li>
                <li><a href='#'>Downloads</a></li>
                <li><a href='#'>Advertise</a></li>

4. Preview before saving.

Credits goes to Bloggersentral with little modification from me.

About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, 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

Express yourself!
5 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun
  1. Hello are using Wordpress for your site platform? I'm new to the blog world but I'm trying to get started and create my own.
    Do you need any html coding expertise to make your
    own blog? Any help would be really appreciated!

    Review my page comedy background music mp3 free download

  2. If you would like to improve your knowledge simply keep visiting this web site and be
    updated with the hottest information posted here.

    My web blog free desktop wallpapers spring flowers (

  3. I always spent my half an hour to read this blog's content every day along with a cup of coffee.

    Here is my homepage - hd wallpaper free download for pc :: ::

  4. Thanks for really help me..
    FIFA World Cup 2014 Fixtures in Pakistan Time

    1. Your welcome Bro! i visited your blog and I found it great!
      Stay connected.


Related Posts Plugin for WordPress, Blogger...