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:

•  Add and display google custom search results on a page

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!".

Follow @realcombiz