Tuesday, 22 November 2011

Push Blogger's Sidebar Ad Down to the Bottom

Good Bye Old Design!
While changing the design of my blog from the old copper themed mess to this new clean template, I was carrying out numerous changes to the CSS of the template.

I made myself busy changing the colours of everything, enlarging and shrinking text, and tapping the refresh button on my browser to check things were peachy.

Hello New Design!
After having gone through many templates, I settled on the design which you can see on this page. 'Clean', I thought and I especially made sure that I praised myself enough for the ninja page buttons which were done so that it didn't form a boring old bar. As my eyes roamed around the screen, I gasped when I took a glimpse of the AdSense advertisement at the bottom of the sidebar.

There were a few problems to it:
  1. The advertisement was placed right below the last widget, with no breathing space.
  2. Having the advertisement in an easy-to-view location is beneficial for increased exposure of the ad but I prefer a more discreet placement. At the time, my sidebar ad was glaring at me in the face!

What I wanted was for the advertisement to be placed at the bottom of the sidebar pane and effectively at the bottom of the page, disregarding the height of the page (which changes depending on content). This would allow ads to be viewed after the reader finishes reading a post, not before.

Usually, the easiest method of placing an element at the bottom of a div is by doing something like the following:
#elementId {
  bottom: 0px;
Unfortunately, the sidebar div does not extend down to fill up the full length of the page. Therefore, when using the code above, it does not affect the position of the advertisement.

Googling around brought my attention to faux columns which allow for divs which extend as I wish mine to do. On inspecting the template code of my site, I found that this was already being done. However, the faux columns were not actually holding the sidebar widgets and therefore I had to find a way to apply the height of the faux columns to my sidebar.

There were mentions of using position: absolute somewhere and setting height: 100% for the container and so on but none of it seemed feasible enough as the template code is rather confusing and there are at least 10 parent divs for the ad div.

What I could do though, was to write a piece of JavaScript which lets me move the ad down. This would actually be the easiest solution since calculating the height of the flexible page can only be done client-side. Here's the code I ended up with:

<script type="text/javascript">
  onload = function(){
    var sidebar = document.getElementById('sidebar-right-1');
    var newheight = document.getElementsByClassName('fauxcolumns')[0].clientHeight;
    var oldheight = sidebar.clientHeight;
    sidebar.style.height = newheight+'px';
    document.getElementById('AdSense1').style.top = (newheight - oldheight)+'px';

To use this code, place it anywhere in your template (before </body>). You can edit your template for Blogger via the menu accessible through: Dashboard - Template - Edit HTML.

The div class and id names used will vary depending on your Blogger template, but should not differ too much as long as you are using Blogger's classic templates (not the odd 'Dynamic' ones). This small piece of code runs once the page is loaded and carries a few jobs out. It first gets the height of the fully extended sidebar from the faux columns, then it sets the sidebar to be that height so that it can extend downwards fully. The code then calculates where the ad should be using the previous height of the sidebar and places the ad there using the CSS property top.

If you have any problems, let me know and I will try to help.
Also, if you found this post helpful, please share it and if you wish to, flattr me.