RealcomBiz
Pin It

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

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" />
</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 -->
  • 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>
  • Click "SAVE TEMPLATE"
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!".

12 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
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

    http://www.onjokes.blogspot.com

    feel free to leave a comment

    ReplyDelete
    Replies
    1. I just check your blog out, great job, keep it up bro.

      Delete
  2. Thanks a lot. You made my day!

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

    ReplyDelete
  4. nice site
    http://www.dkmsmusicbd.com

    ReplyDelete
  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

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

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

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

    ReplyDelete
  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??

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

      Delete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

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