I got a bit carried away with this project, so I have an 'attempt3' for you.
I said last night that I had found a better search box than the one I have in one of the files in my sharing folder. It proved to be bulky and didn't fit into the top bar, so I had to work a bit on it. It was not difficult, but still a bit involved, so I inserted the search box with my changes, and here is what I did:
1. I went to the site
https://cse.google.com/cse/ and found a button saying something like 'create a new search box' (The pages I open are in Norwegian, so I don't know exactly what the wording is in English).
2. I clicked on that button and had to type in which site I wanted to be searched. I typed 'www.coffeecup.com' and was asked to save and get the code.
3. The code I got was this:
<script>
(function() {
var cx = '003692994821310631992:vma0gnpmvec';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
4. I changed the bottom line, the one after </script> to <gcse:searchbox-only></gcse:searchbox-only>
5. Then I added some custom styles in Settings - Head section:
<style>
.gsc-search-box table, .gsc-search-box td {
margin: 1px;
padding: 1px;
}
</style>
You can play around with the margin/padding, but don't give too much.
If there is a lot of space available for the search box, of course #4 and #5 can be ommitted, but in this case they were necessary.
So, then I added an HTML element to the project and pasted the code. That was it.
Of course, you may want a different site to be searchable, so you need to go through this procedure. I haven't checked if it is enough just to grab the new code for this line:
var cx = '003692994821310631992:vma0gnpmvec';
and replace it, but maybe.