Search Google CSE Help - Integration into Blogger

Google's own CSE for their help seems to be broken, so I made my own !

It is under 'Documentation'

Clicking 'Blogs | Docs | Forum' give very few, if any results - almost all are in 'Help'.





To integrate it with Blogger, I set CSE to a two-page layout.
Layout - Control Panel

Click 'Save and Get Code'.

<script>

  (function() {

    var cx = '006489679047832463012:k3mdxr__op8';

    var gcse = document.createElement('script');

    gcse.type = 'text/javascript';

    gcse.async = true;

    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

        '//www.google.com/cse/cse.js?cx=' + cx;

    var s = document.getElementsByTagName('script')[0];

    s.parentNode.insertBefore(gcse, s);

  })();

</script>

<gcse:searchbox-only></gcse:searchbox-only>

is the code for the input box.
I want to put it in the right column, so it can be seen on every page.

In Blogger Layout, right-column, 'Add a Gadget', 'HTML / JavaScript' and paste the code.

Title it 'Search Google CSE help'.

You now have a search box

But the results open in a default results page on google.com.

I want to keep people on this blog site.

Create a Page (not a Post), calling it 'serp'. 

Save it so it becomes http://learningcustomsearch.blogspot.co.uk/p/serp.html.

Re-name it 'Search Google CSE Help' and click 'HTML' in the [Compose | HTML] buttons.

In your CSE setup page,click 'Next: Get code for search results'.

<script>

  (function() {

    var cx = '006489679047832463012:k3mdxr__op8';

    var gcse = document.createElement('script');

    gcse.type = 'text/javascript';

    gcse.async = true;

    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

        '//www.google.com/cse/cse.js?cx=' + cx;

    var s = document.getElementsByTagName('script')[0];

    s.parentNode.insertBefore(gcse, s);

  })();

</script>

<gcse:searchresults-only></gcse:searchresults-only>

Note that the <script> bit is the same as we already pasted into the right column, so you need only paste the <gcse:searchresults-only></gcse:searchresults-only> in the results page

We need to tell the searchbox where to send the search text.

So go back to the first block of code we pasted at the top of the right column of the layout and change 

<gcse:searchbox-only></gcse:searchbox-only>

to

<gcse:searchbox-only resultsUrl="/p/serp.html"></gcse:searchbox-only>

Now you can enter a search on any page, and see the results on a page in the same blog.

If I want to modify my search, the searched-for text is no longer in the input box.

I don't know why !

I might need to add some script to do that.

A simpler approach is to add a second search box at the top of the search results page.

It gives more space for editing queries.

Simply change 

<gcse:searchresults-only></gcse:searchresults-only>

to

<gcse:search></gcse:search>

in serp.html

Actually, I think I had mis-matched tags - it started working better when I corrected

<gcse:searchresults-only></gcse:search>