How to Place Your Ad Units Above the Fold for Over 50% More Clicks

dear_blogger_tutorials

Dear Readers,

The top left corner of your blog posts is one area that’s proven to maximize click through rates on your ads.

Problem is, unless you’ve got a premium theme with a section devoted to advertisements, you’re going to have to edit some code on your own to get your ads showing up here.

And when I set out to slap an ad unit here, just like this, in our Adsense Ante-Up, I couldn’t find a tutorial virtually anywhere on how to do this.

So in true Dear Blogger fashion, I wrote down a guide for you guys on how insert your own ad units (or a Facebook box, or whatever) at the top of every blog post.

Enjoy!

Note: As for the proof on the title, make sure to check out the screenshots in our last Adsense Update.

First, find your “entry-content” tag

single

The result here should be a good one. As I showed in the Ante-Update, this change boosted click revenue from $28 per month to $44, much closer to our $100 per month goal.

In other words, it’s worth the painful coding. 😉

To begin, head over to Appearance-Editor and open up your “single.php” file. Inside this file, you’ll want to look for something like this:

<div class="entry entry-content">

If you can’t find it, check to see if your theme (like Lorraine’s blog) has a file called content-single.php. What we’re trying to find here is where a blog post begins.

For our Blogger users (go Blogger!) you’ll need to find this code in your HTML editor:

<div class='post-body entry-content'>

If you search and search and you can’t find it, try hitting Control+F and looking for “entry-content” or even just “content” and see what you get. As per usual, I’m happy to assist in the comment section.

Next, here’s some advertisement code to insert

Once you’ve found this position (did I mention you should ask away if you can’t), go ahead and insert this little snippet right after to create your advertisement:

<div style="float: left;">
Advertisement code
</div>

Then, you’ll need to create some actual advertisement code in Adsense and replace “Advertisement code.”

get-adsense-code

On the other hand, you could insert something like a Facebook LIKE box in this spot or even a private advertisement (or some other image).  Whatever you want to insert is up to you!

Lastly, I like the option of putting some margin in this div to create some more white space around whatever advertisement you’ve chosen. We covered that back here but it will basically look like this:

<div style="float: left; margin: 10px">
Advertisement code
</div>

Also useful, now that I think of it, is the list of margin shorthands.

Do this only in certain blog posts, you ask?

Maybe you’re getting picky, and you only want this advert to run on certain blog posts.

Fair enough.

To accomplish this, you’ll need a bit more coding, but not that much. And here it is. You want to set up an “if” statement that renders code based on post ID.

<?php if(is_single(array( 11, 17 ))) { ?>

Ad code, which will appear in posts with ID 11 and ID 17.

<?php } else { ?>

<?php } ?>

The way this piece of code works is as follows. If the post matches the numbers in the comma separated list, show some code. Or else, show other code.

In the above case, you’re showing the ad code in posts 11 and 17, and leaving the rest of the blog intact. You could however do this:

<?php if(is_single(array( 11, 17 ))) { ?>

Ad code, which will appear in posts with ID 11 and ID 17.

<?php } else { ?>

Some other text that appears everywhere else.

<?php } ?>

If you used the above example verbatim on your blog, then any blog post with ID 11 or ID 17 would have “Ad code, which…” above it while every single other post would have “Some other text…” in this position.

Not great.

So you would basically copy the code from up above, place it before the “else” tag, and then hunt down the IDs for the specific blog posts where you want your advert to appear and insert them in a comma separated list as shown.

Again, pretty simple!

Neat huh?

Let me know in the comments any problems or successes you encounter while trying this out.

Note: I wrote about margin, padding, divs, floats and images a few weeks ago, and those common code snippets might be useful around your blog too.

Share This Post

12 Responses to "How to Place Your Ad Units Above the Fold for Over 50% More Clicks"

    1. Hi Graham,

      Just make sure to backup the files. Copy paste somewhere, ya know. This edit works great for click thru rate maximization.

      Cheers,
      Greg

      Reply
  1. Interesting info on above the fold. I suppose for roman alphabet we de read left to right and top to bottom. Hopefully viewers come back and read the post after they’ve been diverted !

    Reply
    1. Haha good point Paul. I sort of left out all pieces of user experience in this post because it’s can be a pretty big diversion like you said. But if the solid content keeps going it won’t have a negative effect long-term at all.

      Reply
  2. This is great info, tho as usual I started to get brain freeze once we got into code. But, I know from experience that it’s like following a recipe, so thanks so much for telling me how chili pepper to put in the mix.
    To be honest , I hadn’t thought about the top left corner. I do notice though, you don’t have an ad there yourself.
    Really appreciate you being so thorough:-)

    Reply
    1. I’d never advertise like that to you AK. Not here. On my lesser websites 🙂 Always happy to help out with your blog’s wonderful recipe.

      Reply
  3. Good to know Greg, I have be slowing changing all kinds of stuff on my site. Where to place any kind of ad has been part of that. I now place them at the bottom of each post. It seems to be having and very positive effect. 🙂

    Reply
      1. Crap my dyslexic eye does it again. I meant to say.

        “I have been making changes all kinds of stuff to my site” The rest is ok. If you do check, not that the new strategy doe seem to working quite well. I have just been accepted by eBay so I will adding some of there stuff from time to time. 🙂

        Reply

Post Comment