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
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.”
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.