Saturday, December 29, 2007

Padding Adsense Code in Blogger Blog Templates

Some of the default blogger blog templates place Adsense code automatically in a way that looks very ugly within the template, going inside or outside of graphic sections etc.

On my site, Distribution Business Articles I had adsense code that was showing up too the left of the graphic body template and needed to move the adsense block over to the right a bit.

This used to be very easy with the old blogger, and it is not too much worse now if you know what to look for.

The key is to find the section called <data:adcode/> and place a Div tag around it. I used the id name of 'adpadding' when I did this and gave the left side a padding of 150 pixels.



Here is the result on my blog. Note the body is about 560 pixels wide in total so with a 250x300 ad block there is about 250 pixels to split up and I have used 150 pixels. Its not quite dead center, but its good enough for me. Note this site talks a lot about product recalls and things of that nature hence the list of ads relative to that topic as opposed to something off topic like cartoons or Kohler sinks.



This code is pretty short, simple and sweet, but per a request we wanted to share (You'll want to hit the check box to expand widgets)

This is the code for the css section of your template.

#adpadding {
padding:0px 0px 0px 150px;


Anonymous said...

I wish you had the code so us newbies who know nothing of CSS can use this hack. I bet you would have a lot more responses to this post if that was the case, the image doesnt show the full ad padding code which is key to getting this working. Believe it or not your one of the only blogs to mention how to do this as well.

Unknown said...

Hey anonymous,

We've just added the code. Hopefully that will help people that check out this article later. I would have sent you an email tipping you off with the addition, but that is the downfall of anonymity . . .


Thanks again!