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.

	<div class="post-header-line-1">
	<div style="float: right;">
	AD CODE (size 200 x 200)
	</div>

view raw before_ad_change hosted with ❤ by GitHub

To fix this, I changed the code to this:

	<div class='post-header-line-1'/>
	<b:if cond='data:blog.url == data:blog.homepageUrl'>
	<!-- If user is on an index page-->
	<div style='float:right;'>
	AD CODE (size 125 x 125)
	</div>
	</b:if>
	<b:if cond='data:blog.url != data:blog.homepageUrl'>
	<!-- If user is on any page other than an index page -->
	<div style='float:right;'>
	AD CODE (size 200 x 200)
	</div>
	</b:if>

view raw ad_change hosted with ❤ by GitHub

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. :)

Posted in: HTML