Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



How To Place Ads on Your Blog Without the Clutter

Display advertising has long been a popular revenue stream for many website owners. Often times, however, a site can start to look overrun by ads and it’s not only the blog design that suffers, but the visitor’s experience as well.

A great site design is one that lets a visitor’s eyes flow through it easily and find what they came there for. If you keep a few things in mind when adding banners and advertisements to your website, you can allow them to co-exist with your content instead of being a distraction.

Here are a few tips I’ve picked up along the way…

Choose the proper size ad for the space

Many bloggers make the mistake of using the wrong size ad for the space they’re placing it in. There are a variety of ad sizes to choose from for a reason!  If using Google Adsense, you can see examples of these sizes and choose the correct one for your layout. For example, a sidebar that has a width of about 300px would benefit greatly from the 300×250 medium rectangle ad size. Anything smaller should utilize skinnier ad options, like the skyscraper or square options.

If you are using an ad that is too large or too small for the content area, the whole visual flow of your blog becomes disrupted. Keep things in proportion to allow for a more pleasing visitor experience.

Proper Ad Placement

Separate ads with blocks or different colours

Creating standalone “sections” for your blog ads help to separate them from the rest of the content, which creates the illusion of a less cluttered layout. One trick in particular that I often like to use is to place a wide leaderboard ad at the top of the page, but section it off from the rest of the site by changing the background colour of that top area. Doing this allows the ad to sit comfortably in it’s own designated section without running into the rest of your design. It allows your blog to actually “begin” below the ad and directs your eye downwards instead of seeing the ad and header as one element.

Separating Ads From Your Layout

Split them up

One of the worst things you can do is to create a grouping of advertisements or Adsense ads. This not only makes your blog appear as if it is totally reliant on ad revenue, but can also result in fewer ad clicks because the adverts are so obviously in-your-face. If you want to maximize ad revenue, split up the ads throughout your content or sidebar to make them look as though they are part of the content or design instead.

Split Up Your Ads Instead of Grouping Them

Don’t let the ad take away from your content

If an ad is overpowering your content, it’s time to re-think things. Your content is the most important part of your blog, and a reader shouldn’t be distracted by looming adverts. Instead of placing an ad at the beginning of your content, try placing it at the end.

Don't let your ads distract your readers from the content

Don’t let the ad interfere with your content

When an ad actually interferes with your content or the visitor’s experience on your site, it can leave a bad taste in their mouths. Expanding ads or popup ads are usually the culprit here, so limit the amount you display or don’t display them at all if you are concerned about this. Also, using that much real estate to advertise someone else’s website is never a great idea. If you must use a popup, at least make it benefit you by offering something in exchange for joining your email list.

Stop giving so much real estate to other products and promote your own

Incorporate above-the-fold ads in a pleasing way

Many ad networks specify that you must place an ad above the fold of the website to adhere to their terms. What does that mean? Basically, it means placing it within the first 1000px of the top of the page. Although this can sometimes limit your blog design creativity, you can find ways to incorporate the ad to work with your design instead of against it.

The leaderboard separation trick I mentioned above is one way to do this effectively. You can also try making your header area shorter and bumping up your sidebar so that you are able to display the first bits of sidebar content above a sidebar ad.  Remember, usually the entire ad does not have to be visible in your sidebar under these conditions, but rather the ad needs to begin above the fold.  Check your ad network’s policies if you’re unsure.

Above-the-fold ads don't need ALL of the attention...

Use responsive ads for mobile compatibility

Many ad networks now provide responsive ads, and this is definitely something you should take advantage of! Google Adsense is one that has a Responsive option and will make sure that the ad size adapts the the device that the visitor is using. For example, if you place a leaderboard in the footer of your blog, normally it would be cut off or stretch the mobile view of your site to fit it in. With a responsive ad, that leaderboard would change into a medium rectangle or something similar to fit the space properly. If you have ads set up currently using Adsense, I recommend swapping them out with the Responsive option!

I hope this post made you re-think your use of ads on your site. Your blog can still look decent even with display advertising, you just need to play around with sizes, positioning, and always make sure that your content attracts the most attention!

p.s. You can now grab my new book The Ultimate Blogger To-Do List on Amazon!

Often times, a site can start to look overrun by ads and it’s not only the blog design that suffers, but the visitor’s experience as well...

  • Thanks for these! Seems pretty straight forward and clear. I really like the way you’ve set up the visuals here to show where the ads should go. I’ve never really thought about color blocking and separating the ads in that way before.
    Couldn’t agree more about the pop-up ads. I seriously leave so many sites that have those ads that take up the whole page as soon as you get there, especially when I’m looking on my phone because they become super difficult to shut off.
    Are there any other ad networks that you particularly like besides Google ads?
    Thanks!
    TechYourBlog.com

  • Great tips! I’m definitely going to have to keep them in mind. I really like the idea of color blocking and sectioning off ads from other content. Thanks!
    xo Heather
    lovelyheatherly.com

  • Junaid Ali

    Cheeck it out! junaidali405 will fix website html and css error or problems for $5 on #Fiverr https://www.fiverr.com/s2/d6abcc7b45

  • zeeshan

    Hello Danna nice post

  • aftabak

    these recreations are free and accessible on the web, one can play for any number of hours and. http://cinema-box.com

  • Cathryn

    Thanks for the great ad placement advice here Dana. Like the others said, I’ve never thought of giving a background color to the leaderboard ads in the headers, either. What a great tip! One thing that I’ve noticed lately in some blogs are the ads at the bottom of EVERY photo in the post! It’s so annoying that I just leave the blog when I see that type of advertising network at play.

Navigate