Move 'Result Info' And 'Powered by Google' to the bottom of Google Custom Search's results page?

Question

Please take a look at this screenshot first:

I would like to move the highlighted block in the image, i.e. the the 'Result Info' (the "About 5 results (0.40 seconds) text)" and the 'powered by Google Custom Search', to the bottom of the search results.

Removing them maybe against Google's terms, but moving them to the bottom doesn't appear to be so, as many websites are doing it.

Here's the javascript code that I use for the search results page:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};
    var googleAnalyticsOptions = {};
    googleAnalyticsOptions['queryParameter'] = 'q';
    googleAnalyticsOptions['categoryParameter'] = '';
    customSearchOptions['googleAnalyticsOptions'] = googleAnalyticsOptions;
    customSearchOptions['adoptions'] = {'layout': 'noTop'};
    var customSearchControl = new google.search.CustomSearchControl(
      'XXXXCANTGIVEITAWAYXXXXX', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchResultsOnly(); 
    customSearchControl.draw('cse', options);
    function parseParamsFromUrl() {
      var params = {};
      var parts = window.location.search.substr(1).split('\x26');
      for (var i = 0; i < parts.length; i++) {
        var keyValuePair = parts[i].split('=');
        var key = decodeURIComponent(keyValuePair[0]);
        params[key] = keyValuePair[1] ?
            decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
            keyValuePair[1];
      }
      return params;
    }

    var urlParams = parseParamsFromUrl();
    var queryParamName = "q";
    if (urlParams[queryParamName]) {
      customSearchControl.execute(urlParams[queryParamName]);
    }
  }, true);
</script>

Can someone who knows JavaScript and/or has used Google Custom Search Engine, modify the aforementioned JS code accordingly?

PS: I don't know JavaScript, so some kind of spoon-feeding will help. Thanks.

Answer 1

Are you already using jQuery on that page? If so, you can move that section around by doing this:

$( '.gsc-result-info' ).appendTo( '.gsc-control-cse' );

That will be fragile and could break anytime Google changes things.

I'm not sure sure that is quite moving the part you want moved (and your layout might be a little different than the demo. Just replace gsc-result-info with the class of the div you want to move gsc-control-cse with the div you want to move it to.

Answer 2

Google has some documentation about changing the look and feel of the results page. It looks like you can do a lot more than just mvoe the header down to the bottom.

I think you might want to look at the Setting the Search Element Layout section. There is an option called "Results Only" that may be close to what you are looking for.