how to use banner on blog design
7 minutes read

The beginning is the hardest part of doing anything. When it comes to business, you never know where to start from, what platform should you approach.

Even though blogging is only a small part of a strategy, most of the time just starting a company blog in order to leverage your content marketing strategy and to get some results is the best way to go!

68.52% of marketers and business owners believe that a blog adds credibility to a website.

Or maybe you want to increase your income on your blog with banner ads. Matthew Woodward will take you to a step by step guide where he will show you how to add banner advertising to your site for an extra income.

Many marketers struggle not only with creating relevant content or sharing valuable information to their community but with squeezing the juice out from the blog post orange.

First things first, you need to understand the metrics you should use and measure them on your blog. Second of all, you need to know what other instruments you can benefit from so as to make the visitor not only give you his e-mail address (lead generator) but also buy from you.

And yes, it’s easier said than done. But don’t worry, that’s why I’m here.

We see many big blogs that are using banner ads in one way or another on their blog. The small picture you see on the right sidebar is a banner ad that is asking you to take an action (Click, Download, Learn More, Watch More). The exit intent pop up is a banner ad. The footer visual that is asking you to subscribe to the email newsletter, is another banner ad. The visual somewhere in a corner of the web page, outside of the blog post’s visual anatomy, that is presenting you the benefit of the product/software it’s a banner ad.

Today, banner ads are not only the visual ads Google “presents” on the WWW. Everything we see, even if we’ve seen it on our favorite social media platform or on a blog, it’s a banner ad.

So, this article is for all of those who manage a blog, even if it’s a personal one or a company owned blog. If you want to get more than ‘some’ traffic or leads with your blog, you can use banner ads.

How to make the best from your banners on your blog? How to use banner ads and where to place them on your webpage?

These are some questions I will answer in this blog post.

Make the banner part of the blog

desktop showing banner ads on a blog page


Think about the branding of your blog. What kind of colors do you use and where could you place your banner ads?

Don’t use the banner ads in your blog to disrupt the user experience. Think about this: the user is there because his intent is to read a piece of content or to engage with your community. He’s engaged into an action. If you are throwing a piece of banner ad in his face just to click on it and to enter the sales funnel, there are big chances that you’ll lose him as a reader and as a potential customer. Try building a relationship with him in a more organic and natural way.

This is why you need to integrate the banner as a part of your blog and this is why you need to understand your readers’ behavior.  

One of the reasons for a banner ad on a blog is to announce the reader about something. Maybe you just wrote your ebook, so you want the new readers who landed on your website to know about your project.

There are other reasons why you should use a banner ad on your blog, such as: brand awareness, collecting leads, affiliate programs, sponsored ads, and counting.

Design is one of the most essential parts of a banner ad on a blog. We covered a lot of this topic, so I recommend you read the following articles:

The other part is HOW you can insert a banner ad into your blog.

There are 2 ways:

  1. Upload the downloaded banner ad
  2. Use an embed code

1. Upload the banner ad to your blog

If you didn’t design it by yourself you probably received it in different formats, such as PNG, JPEG, GIF, SWF, or others from your designer. You can upload them in no time.

But before you go on your blog, make sure that your banner ads are:

  1. Hiqh quality images
  2. Are in sync with your brand colors
  3. Have the right sizes
  4. Have a compressed file size (I recommend you to use tinypng)

So if you have a WordPress blog you can easily click ‘Upload your banner on your blog’.

Just go to your Dashboard -> New -> Media -> Upload the file. And -BAM!- now your banner ad is uploaded on your blog.

Now, you can use it in different parts of your blog, maybe on the sidebars or even in your blog posts.

These banner ads behave just like a regular visual, but the difference is their purpose. You can make people click on them and get them to a particular landing page.

This being said, let’s talk about the other way of putting a banner ad on your blog.

2. Use embed code

For some marketers, using an embed code can be a hassle, but it’s not that difficult. And it can turn out to be pretty useful.

But what is an embed code?

Embed codes contain a standard HTML script that allows you to include banner ads in any web page that accepts HTML code input, without hosting them on your server.

Why are embed codes a good tactic for your blog?

Because you can use a visual on your blog without hosting it on your server. So that can help your blog load faster. 

Now that you know how can to upload banner ads on your blog, let’s go further and see where is the best place to use them.

Where to place the banner ads

Did you know that the most common patterns of reading a website/blog are the “F” shape and the “Z” shape?

The F Shape:

The reader will rarely read every word of your text. This is why it’s so important to focus on the first 2 paragraphs that should be the hook for your blog post.  (Source: NN Group)

F - shape placements for banners on a blog

If you want to make the user read your entire blog post, I recommend you to start using paragraphs, subheads, and bullet points with enticing keywords.

The “Z” Shape: 

This is the kind of pattern that applies to other kinds of websites, that are not necessarily organized in block paragraphs.

The reader will start by scanning across the top of the page, where the important information is found, then they will go down to the opposite corner and make the same action across the lower part of the page.

And I bet that you have one of these 2 types of patterns when you read a blog post.

But why do we need to know about these 2 kinds of reading patterns? Because this will help us know where to apply our banner ad to the blog.

You have 2 choices:

  • Sidebars
  • Into the content


The sidebar is one of the regular spaces to place banner ads.

You have 4 areas where you can place them.

A. Right

The most common place where you can use a banner ad. Why? Do you remember what I told you before with the “F” shape pattern? This is the main reason.  We use the same way to place our banner ad into our blog. Also, the guys from CopyBlogger are doing the same.

banner placed on a blog right side

B. Left:

Sometimes you can choose to have a different approach to your placement, so you can try to redesign your blog and use the left sidebar. Kissmetrics has a minimalist left sidebar which they use to announce webinars or other kinds of actions.

banner placed on a blog left side

C. Header

Think about how many big web publishers or blogs are using their header to announce something, or to advertise? I found a great example from CMI.  

banner placed on a blog header

D. Footer

If you don’t want to use the right, left, or header sidebar for your banner ad but you still want to make good use of that part of your blog, you can use the footer for banner ads. Just like Rebekah Radice done on her blog.

More than that, she is transparent with her readers and tells them that this is a sponsored ad from one of her clients. 

banner placed on a blog footer

Into the Content

This is one of the strategies we found out to be very effective for many bloggers. The user is coming on his blog to read valuable information, his focus is on the content. Now, if his focus is on the content, that means that the blogger should use the content space to place the banner ads.

I’ve seen this tactic on Neil Patel’s blog and I believe that is a good strategy, as far as he continues to do it.

banner placed on a blog into the content


If you don’t want to disturb your reader when he’s on your blog, but you also want to make the banner ad part of your blog, you can easily choose to use the bottom of the blog post.

We tried this once and we found out that it is very useful for our content marketing strategy.


Blogging is not only about writing blog posts and sharing them.

It’s also about how to make the reader part of your blog but also how to use this tactic to sell him your product/service. The fact is that before you ask the user to buy from you, you need to give him valuable information.

When you will know the behavior of the users landing on your blog, you will understand how to use banner ads on your blog.

Now back to you, do you use banner ads on your blog? If yes, how effective are they for your digital marketing strategy?


Robert Katai
Robert Katai is the Product Marketing Specialist at Creatopy. His work was featured on Adweek, Entrepreneur, Marketing Profs, Content Marketing Institute and other places.


  1. Hi I would like to find out if they is another way of embedding a code on website.I understand wordpress does not allow certain script codes.

  2. Thanks for sharing your post.

  3. Thanks for sharing your post about a banner.

  4. Great Blog..!!
    All the information that you shared with us is very helpful and useful. Thank You for sharing this information with us.

  5. Can we use vector images as a post banner after editing.

  6. nice information, thanks for sharing

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You may also like