Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

Add Google Custom Search Box To Navigtion/Menu Bar For Blogger Blog

by Unknown | Friday, June 15, 2012 | 19 Comments

Adding Google custom search box to your blog is another best way of providing a easy navigation to your readers, google custom search engine is more efficient than the default google search box in the sense that, it is capable of displaying relevant result unlike the default search box. This will also increase your pages views and impressions because it will kept your readers with articles related to their search queries.
Before the google custom search box can work for your blog/site, you will need a google custom search box ID, so let's get started with how to get that.

How To Get Google Custom Search Engine Id
  • The first step for you is to get your custom search code, for procedure on how to do this, read How to add google search box to blog.
  • After you have got your code, look for your id in the code given to you, we are only interested in the id, your id will look, something very similar to this: 004697161763279382635:f2dccf1y31k, copy the id and let's move on.
Search Box Code

The code below is the code for the search box which you will use.

<!-- Google custom search box Start - Designed by Realcombiz.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'>
<input name='cx' type='hidden' value='partner-pub-004697161763279382635:f2dccf1y31k'/>
<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="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
<!-- Google custom search box End -->
  • If you want your search results to show in a new window, simply add target="_blank" after id='cse-search-box' as highlighted above, but make sure you put space in-between.
  • Replace 004697161763279382635:f2dccf1y31k with the id which you copied from your google cse code in the first step.
 How To Integrate The Search Box
  • Log-in to your blogger dashboard
  • Click on "Design" > "Edit HTML" > back up your template
  • Mark/Tick "Edit Widget Templates"
  • Use ctrl F to find the following code
<b:loop values='data:links' var='link'>
  • Look above the code, you should see <ul>, if you don't find <ul> above the code above, keep searching by clicking "Next" on your search bar until you see a line where <ul> appear above it.
  • Now paste the search box code After <ul>
Check your blog to see your google custom search box (CSE) working perfectly well.
You might be interested in reading this:
Hope you enjoy this post? If so take few seconds to share it, and don't forget to subscribe to this blog and receive our latest post directly into your email.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

19 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. nice blog checkout mine on


    feel free to leave a comment

  2. Thanks a lot. You made my day!

  3. How do I customize the look of my CSE?

  4. nice site

  5. Hi.. I just want to say that it was a nice reading material. I hope you come out with more interesting posts, because I bookmarked your website. All the best.
    seo karachi

  6. Hi briana
    Thanks for the support, i really appreciate it. Be expecting more creative content.

  7. This comment has been removed by a blog administrator.

  8. This comment has been removed by a blog administrator.

  9. you have explain this very honestly its perfect guideline for every one.
    karachi web design company

  10. 404. That’s an error.

    The requested URL /cse?cx=partner-pub-004697161763279382635%3Af2dccf1y31k&q=x&ie=ISO-8859-1&sa=Search&siteurl=www.realcombiz.com%2Fp%2Fhtml-editor.html&ref=&ss=0j0j1 was not found on this server. That’s all we know.

    can you fix it??

    1. hi there, remove ' partner-pub- ' from the code and save the html

  11. Hi, thank you for this. However I only get one search results page and no scrolling. Can you please assist. Thanks.

  12. You just made my day. Great tutorial!


Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger