How to Integrate GCSE to Blogger Custom Search Box

Today, I am going to share some simple steps to integrate GCSE to your own Search Box! For more details about GCSE and its advantages, you can visit my post : Adding Google Custom Search Engine to Blogger
Step 1 : Creating Your Google Custom Search Engine
Go to Google Custom Search Engine
Sign in your Google account » Click on New Search Engine » Fill up the form » Click on Create
Once you've successfully created your Custom search engine you can finally add it to your site by clicking on Get code
Next, copy the code and proceed to Step #2
Step 2 : Adding the Code to your Blog
Create a page in your blogger and name it as "Search" or something similar (?)
In HTML tab paste the code you just copied from Google Search
*The code should look like this
<script>
(function() {
var cx = 'YOUR UNIQUE ID GIVEN BY GCSE';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'https:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
Replace <gcse:search></gcse:search> with <gcse:searchresults-only></gcse:searchresults-only>
Go to your Blogger Template » Press Edit HTML; then
Try to look for your Search Box code which might look similar to this
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
Replace /search with the URL of the page you have created e.g. /p/search.html; then
Save your Template
If you successfully managed to integrate it to your site, you will notice that every time you try to search you will be redirected to the Search Page you've created.
I hope you enjoy this article. Please leave a comment! Don't hesitate to ask for help if you're facing any problem integrating GCSE! Happy Blogging.
Hi Lloyd,
ReplyDeleteHow are you these days? I see you have done so much updates with your blog. It's great :)
Today I'm contacting you regarding google search box. I tried to install google custom search engine on my blog but it's malfunctioning. I've installed it below the post. Have a look at it and please help me with this.
http://www.newbloggerlab.com/2014/10/how-can-infographics-benefit-you-in-what-ways.html
Hello, it looks like this is your problem:
ReplyDeletetable.gsc-search-box td {
background: #f0eee9;
padding: 15px;
}
just remove the padding :)
Hi,
DeleteI removed padding: 15px; but it's not working!
Also there is a problem with search results I think. Can you search something using that search box.
DeleteI installed GCSE here http://otakumodeph.blogspot.com/2014/09/a-little-guide.html, and didn't see any problems except for the button which shows "SEARCH", can you tell me exactly what do you want to do? are you following this tutorial or doing something else?
DeleteYes I'm following this tutorial and I was just planning to use google custom search box below my posts. But you can see that search box is not actually displaying correctly. You can look my search box it's not functioning. So I was requesting you to fix that. See this image: http://prntscr.com/516x3l
DeleteBy the way is there any method to use google adsense in my custom search box. If yes I'd prefer to use my own/default search box after post with adsense ads integrated in search results. See image: http://prntscr.com/516x79
it keep giveing me a pop up result how do i fix it
Deletego to your gcse account, choose your search engine, then click on 'look and feel', choose 'results only', and finally save and get code.
Delete