Apply Google for Search theme(style) in blogger.com

Google Adsense for Search

Google adsense for Seach is another great product from google. Whilst increasing your earning, just like adsense for content, it also increases your user experience. You can use Adsense for Search anywhere on your web page including your blogger.com pages.

Adsense for Search theme failed

One nice feature Adsense for Search offer is Look and Feel (theme) feature. First implementation instantly showed that theme is not working in blooger.com. How do we fix this ?

Implement Adsense in Blogger.com

There are 2 ways to implement Adsense in Blogger.com, both for Content and for Search:

1. Using Adsense Widget, or Monetize tab, in blogger control panel. This is the simplest way, yet it's so limited.
2. Copy and paste your ad unit script from your adsense account. This the most flexible way available (AFAIK).

The rest of this post is going to cover the second way of implementing Adsense for Search.

Access your Adsense for Search control panel

You can get adsense for search script in your adsense control panel. In each ad-unit (for search) in New Adsense Interface page, there's a link with text Access more advanced search features, at the bottom, to access Adsense for Search's control panel. For more advanced configuration, I recommend use this control panel instead.

In 'Look and Feel' menu, you can choose layout, theme and customizing the way your Custom Search form appear.

Back to our main prolem. Example of Adsense for Search script is shown below:

<div id="cse" style="width: 100%;"> Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('partner-pub-xxxxxxxxxx:xxxxxxxx');
customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
}, true);
</script>

<link href="http://www.google.com/cse/style/look/minimalist.css" rel="stylesheet" type="text/css"></link>

The reason why Adsense for Search Theme is not working in blogger.com is somehow the <link /> didn't get executed. As a matter a fact, that line seems didn't get saved at all. Perhaps because it's an external <link />

Solution

Since <link /> for theme does not work, we could append style option to the second argument of google.load() method. As in this blog, I use MINIMALIST theme for example below.

google.load('search', '1', {language : 'en', style:google.loader.themes.MINIMALIST});

And that's about it. Theme will appear in your blogspot page. Themes currently available are :BUBBLEGUM, ESPRESSO, GREENSKY, MINIMALIST, SHINY. Read google documentation here.