Inactive blog. If you need anything, contact me : lloydalemania@gmail.com Hire me

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.

8 comments

  1. Hi Lloyd,

    How 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

    ReplyDelete
  2. Hello, it looks like this is your problem:

    table.gsc-search-box td {
    background: #f0eee9;
    padding: 15px;
    }

    just remove the padding :)

    ReplyDelete
    Replies
    1. Hi,
      I removed padding: 15px; but it's not working!

      Delete
    2. Also there is a problem with search results I think. Can you search something using that search box.

      Delete
    3. I 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?

      Delete
    4. Yes 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

      By 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

      Delete
    5. it keep giveing me a pop up result how do i fix it

      Delete
    6. go to your gcse account, choose your search engine, then click on 'look and feel', choose 'results only', and finally save and get code.

      Delete

[default]

mba-1

[enabled]

521946774841758
  • Mailing List

    Sign up with your email address to receive news and updates straight in your inbox.

  • 1% Task has expired.