This blog no longer exists.
You will be redirected to something cool.

Tuesday, October 18, 2011

Blogger Trick: Resize Ads Using an 'If' in Markup

I wanted to put ads on CodeGurl, but was having a problem with it looking tasteful, while still being effective. A 200 x 200 pixel ad unit (embedded at the top right of each post) is more effective in terms of CTR than a 125 x 125 pixel unit. The 200 x 200 pixel ad unit looks great in an individual blog post. However, when on the homepage, if a post has an image, the image will appear at the top left of the post. Because of this, it makes the blog look like garbage.

To fix this, I had to make some changes to my template. I wanted to make it so that when a user is on the homepage, the ad unit at the top right of each post is 125 x 125 pixels, but when they are viewing an individual post, the ad unit is 200 x 200.

To fix this, I changed the code to this:

This really seems to work out really well. I have a few slight things to work out on the images, such as some slight padding so that a post's text doesn't smush right up against the ad unit. I am too lazy to make the change right now.

Hopefully I don't encounter any problems with this change. I might have to check out past blog posts to see how it looks, especially ones where I've placed an image (in-post) at the top right.

I've added a 200 x 200 pixel image and a 125 x 125 pixel image to this post so that you can see the difference in size of the ads. :)

2 comments:

Use [b:if cond='data:blog.pageType == "index"'] instead. That would cover you when people click on "older posts" link or when they view posts tagged with a certain label, etc.

@Manki
Thank you so much! I am going to make that change right now. I didn't think of that. :)