Centering Adsense Ads on blogger pages

Recently I decided to add Adsense ads on my blogger page to earn zillions of $$$$. Blogger dashboard offers easy to use Adsense integration (Monetize tab). It helps you to create Adsense account and automatically places the ads on your blog page. The problem is that it doesn't offer much control over the way the ads are displayed, soe you can't e.g. center your ad, align it in to the right etc. To achieve that you'll need to create the ad manually through the Adsense page (see Adsense help) and then paste the code into your blogger template:

1. From blogger dashboard got to:  Layout > Edit Html


2. Check the "Expand Widget Templates" checkbox to see the detailed view of your template


3. Find the place in the template where you'd like to place the ad.


4. Create a div element that would store your ad and style it as much as you want (center it, add padding, etc.)


5. Paste the code generated by Adsense into the div


6. Change the following characters in the generated Adsense code:
   
   
   • < change to &lt;
   
   
   • > change to &lt;
   
   
   • " change to &quot;
   
   so the code for your Ad looks somehow like this (changed lines: 1, 2, 3, 5 & 8):

   <script type='text/javascript'>&lt;!--
   google_ad_client = &quot;pub-5***************&quot;;
   google_ad_host = &quot;pub-1***************&quot;;
   /* name of your ad */
   google_ad_slot = &quot;7*********&quot;;
   google_ad_width = 160;
   google_ad_height = 600;
   //--&gt;
   </script>
   <script src='http://some_google_linkto_js_file'
           type='text/javascript'>
   </script>
   

   It is important that you do this, otherwise you'll get a JS error 'pub is undefined' (or something similar) on the page and the ad will not be displayed.

Solution and automatic converter found here.