Friday, January 18, 2013

Custom-search-engine adds an "overlay" results layout

This quick-tip is about a new overlay results format which Google Custom Search Engines have just introduced - and which looks like it will be their new standard. 

Custom Search Engines have announced a new layout - which appears to have become their new standard option.

Search-engine creation is much the same as it was, but at the end you only get one piece of code to install, and it can just go in the place where you want it (no more messing with editing the <header> in your template).

The search results page is shown as an overlay on top of your regular page.  As always with custom-search-engines, there are ads-by-Google at the top of the page, and if you have already become an AdSense publisher you can use your custom-search-engine to share the revenue.

The big question is - will this new layout approach work in Blogger?    If I was writing an article, I'd test it out somewhere else first, and have some advice about the options, likely problems etc.   But since this is only a quick-tip, this post is my research!   Below, you should see a search-engine, which is set up to search inside Blogger-HAT.   Search for something in it, and you will hopefully see how the overlay search results work.    (If not, I'll come back and change this post as soon as I know more about the problem and how to solve it.)

See an example of custom-search-engine overlay results format

Try it out here:

Is this layout better?

If the layout works, my next decision is whether I should switch the overall Blogger-Helper-Search tool over to use it.

 What do you think?   Like the overlay search results approach, or hate it?

Share this Article


HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter


  1. I like the overlay, it allows the previous page to be accessed really easily by either clicking the cross in the top right or anywhere outside of the search results.

  2. any ways to edit to our own custom search box?

  3. yes you can.
    choose overlay option and save the code, find:
    "If you want to use advanced features, Get the V1 code instead."
    copy this to your website and edit the css which is a part of the V1 code.