My good friend and long time collaborator, Marty D., recently devised a novel way of inserting per-post private-party ads on her blog. She generously agreed to share her technique with you here as a guest post, so enjoy, and thank you, Marty! P.S. Marty has the most awesome DIY blog ever. 

The other day I was asked by a potential advertiser if I would consider placing their ad on one of my posts. I’d never heard or thought of the possibility of advertising on a per-post basis, so I hemmed and hawed and lost the advertiser.

That made me think. Since I am adamantly against placing ads within the post content, how could I place a unique ad in the sidebar for a particular post without tampering with the sidebar widgets?

Here is my solution: Design the ad yourself and place it as an image in your post (with the appropriate link) with CSS displacement so it floats over the sidebar.

The floating ad to the left of this webpage is perfect for per-post private ads.

You can see what I mean in the Kinetic Wall Art  post on my website. At the top of the left of your screen is a “Your Ad Here” image. This image is actually inserted into my post. It only looks like it’s off to the side. On high-resolution monitors, the ad stands apart from the website, but on low-resolution monitors, it is superimposed over my Google ads.

One thing I worried about in this work-around was what Google would think of my trick. There are some pretty strict rules for using Google Adsense, and I wanted to make sure I wasn’t breaking any of those rules (Google will close your Adsense account if they detect that you are tricking viewers into clicking on their ads).

One of the rules states that you cannot fake the placement of an Adsense ad in such a way that deceives viewers into clicking on it. Is my work-around a falsification that Google will frown upon? No, because the floating ad–as you see in my example–is not in any way a trick to get viewers to click on Google’s Adsense. It is a legitimate ad for a non-Adsense customer.

So. How do you displace an image in a post to appear like it is in the sidebar or “off the website” entirely? All you have to do is add some CSS code to tell the browser where to put one of the corners of the image.

Think of your screen as a grid with the very center being Zero. Go left and you’re in negative zone. Go right, you’re in positive. Go up, it’s negative; down, it’s positive.

If you choose a relative position for your image, it will start the zero where you placed your image rather than the center of the screen.

I’ve experimented with the different positioning codes (fixed, absolute, and relative) and found that the relative position carries best between the different browsers. Your CSS code, then, should look something like this:

.floatad {

position: relative;

top: -2px;   /*or wherever you need the top of the image to be */

left: -50px;
}

Then, when you insert the image at the beginning of your post, just call up the CSS by adding the class to the image link:

<a class=“floatad” href=…><img src=…></a>

You will have to play with the numbers to place the ad exactly where you want it. Use top or bottom; left or right; not both.  The corner you choose becomes the zero point on your grid. To move it left and up, your code should read top=-50px; right=-50px; (or whatever). Below is an example of the zero point being in the top right-most corner of your grid.

Remember to check with all browsers and screen resolutions before publishing your ad. Nothing is guaranteed to be the same, and you will have to choose the best compromise that works across the different platforms.

And that is how you can legitimately advertise on a per-post basis.

This is a huge benefit because you can charge less for ads, making it more attractive to advertisers, and you create an almost infinite amount of space on which to advertise!

Good luck. Bon chance. Boa sorte!