Hiding 1x1 Images in Blogger

Bloggers such as myself who are in the Amazon Associates program use invisible 1x1 images to keep track of how popular our links are. But Blogger's style sheets put padding around all images by default, creating an ugly space. I had trouble fixing this, but I finally found a way.

Log into your blog. Click Customize, then Layout, then Edit HTML. Add the following to your template's <b:skin> tag, just above the line body {:

img[width="1"]
{ padding: 0px !important; }

If you're using a hosting service other than Blogger and your template doesn't have a <b:skin> tag, look for a <style> tag or a .css file instead.

Why not use a class?

What's unusual about this problem is that we want to affect only 1x1 images, but not real images used as illustrations, in ads or for navigation.

The ideal solution would be to give 1x1 images a class. Each img tag would contain class="1x1", and the selector (the first line of the above rule) would become img.1x1. But Amazon doesn't do this, which means I'd have to manually edit every piece of code Amazon gave me. So we need to select based on the img tag's width or height actually being 1.

CSS selectors based on tag attributes are an obscure feature. Even Jason Cranford Teague's otherwise excellent manual DHTML and CSS for the World Wide Web, Third Edition, neglects to mention them. But you can read all about them on two pages at the W3C site. (Note that the second link includes some selectors which have not yet been made standard, but which all major browsers already implement.)

Why an invisible image?

Say I want to post a link to Amazon's page for Watchmen on Blu-Ray. I ask Amazon to provide code for the link. That code includes an img tag whose src is on Amazon.com.

When your browser asks Amazon's server for the image, Amazon records this as an "impression." Later on, Amazon can tell me how many impressions each of my links has received, what percentage of these impressions translate into clicks, and what percentage of these clicks lead to purchases from Amazon. I don't make any money unless a reader like you follows my link and buys something (though not necessarily the product I link to) from Amazon, so it's in my interest to know which of my links are and are not leading to purchases, and what my readers are interested in.

1x1 images give me a way to learn that without your having to fill out a survey or clutter the screen.

A note about punctuation

If you want a punctuation mark to immediately follow your text link, put it between the </a> tag and the <img> tag. Otherwise, it may wrap onto the next line separately from the last word of the link.