Welcome! At Blogspot Blogger Guide we show you the easy way to customize your Blogger Blog and offer tips, tricks and fixes to take the technical headache out of blogging.

Thursday, April 16, 2009

Easy Way to Put Banner Ads on a Blogger Blog

Beginner bloggers who want to make money from their blog often ask me how to put affiliate banners on a Blogger blog (Blogspot blog). In this Blogspot tutorial I outline the steps to help you put banners on Blogger the easy way in three different positions: the sidebar, the footer and above blog posts. Follow these instructions and you will have your affiliate banners up and running in no time and start earning money from your blog.

Easy Way to Put Affiliate Banners on a Blogger Blog in 3 Different Positions -sidebar, footer, above posts - Blogspot Tutorial with Step-by-Step Guide

Sign Up for Some Affiliate Marketing Programs


In order to make money online and place affiliate banners on Blogger you first need to sign up as an affiliate with at least one referral program. What affiliate market program you choose will be dictated by your blog topic and your niche within the topic.

If the world of affiliate marketing is all completely new to you I suggest you start with becoming an affiliate to services you might already belong to like Amazon and Ebay.

Another good place to dip your toe in the water of affiliate marketing is Clickbank which boasts a huge range of advertisers. If you make a search you are bound to find a product on there that would integrate well into your blog.

Add Affiliate Marketing Banners to Blogger Blog as an easy way to make money from blogging in addition to Google Adsense - Google Blogger Tutorial giving step-by-step instructions about how to put banners on your a Blogspot blog

Steps to Put Affiliate Banners on Blogger the Easy Way


Once you have signed up with an affiliate program which fits with your blog topic and niche and will pay you referral fees you can start earning money by placing an affiliate banner on your Blogger blog.

Placment of an Affiliate Banner

Before you start the process of putting a banner on Blogger you will need to decide where you want to place your banner on your blog for best effect.

Here are 3 very easy options:

1. Place Banner in Blogger Sidebar


Adding an affiliate banner to the Blogger sidebar is an easy placement option and likely to afford the best benefit. Follow these steps to put a banner in the side bar on your Blogspot blog:

  1. Login to Blogger

  2. From the Dashboard choose Layout from the left-side menu

  3. In Layout scroll until you find the sidebar


  4. Click on Add a Gadget in the Blogger sidebar

  5. Choose the HTML/Javascript gadget from the list

  6. Choose a name for your banner if you wish and type it into the title box (optional)

  7. Paste the affiliate banner code provided by the affiliate service into the content box of the pop up window

  8. Click on the Save button

  9. Move your banner around in sidebar using drag and drop until it is positioned where you want it

  10. Check that your banner is displaying and in the correct position by clicking on the Preview (eye icon) in the lower right corner

  11. Click the Save icon (next to the eye lower right corner) to confirm the new layout of the sidebar.

If you want to center the banner enclose it in a center HTML tag like this:
<center>YOUR AFFILIATE CODE</center>



2. Place Banner in Blogger Footer


Adding an affiliate banner to the Blogger footer can be effective especially if you have other gadgets like random posts and recent posts there. For third-party and some default Blogger themes there may be three columns in the footer so you will need to check the bottom of your template and decide in which column to put your banner.

Follow these steps for easy placement of a banner in the footer of your blog:

  1. Login to Blogger

  2. From the Dashboard choose Layout from the left-side menu

  3. Click on Add a Gadget in the column of a footer where you want to put your banner if your Blogger theme has more than one footer

  4. Choose the HTML/Javascript gadget from the drop down list of options

  5. When the pop up window appears paste the affiliate banner code as supplied by the affiliate marketing service into the content box

  6. Choose a name to give your banner a title. A title is optional

  7. Click on the Save button

  8. Place the banner in the optimal position in the footer by using Blogger's drag and drop feature

  9. When satisfied check that your banner is displaying correctly by clicking on the Preview (eye icon) in the lower right corner

  10. Click the Save icon (next to the eye lower right corner) to confirm the changes to the Blogger footer.

If you want to center the banner enclose it in a center HTML tag like this:
<center>YOUR AFFILIATE CODE</center>



3. Place an Affiliate Banner Above the Blogger Posts

Another excellent place for a banner is to position it so that it appears in the very central position above the blog posts. To add a banner to the main section or page body area of Blogger involves putting the code in an HTML/Javascript gadget and placing it above the blog posts gadget.

Follow these steps to add your banner code above the posts on the home page and every other post page:

  1. Login to your blog on Blogspot

  2. From the menu on the left-hand side of the Dashboard select Layout

  3. Scroll down until you find the Section labelled either Main Section or Page Body Section. Look for the blog Posts gadget to confirm you are in the right section

  4. Click on Add a Gadget (if you find there is no Add a Gadget link you will need to open up the section. Take a look at my step-by-step post about how to add a gadget above blog posts including detailed instructions about how to unlock the Main Section / Page Body Section of Blogger to add more widgets.

  5. Assuming you can the Add a Gadget link in the main blog post section / page body section click on it.

  6. Add a Gadget link in the main blog post section or page body section and choose HTML Javascript gadget to place an affiliate marketing banner above posts in a Blogger blog

  7. Choose the HTML/Javascript gadget from the menu of gadgets that appears

  8. A pop up window will open. Paste your banner code into the content box and add a title if you wish (optional)

  9. Select Save to save the changes

  10. Make sure the new gadget is the first widget in the section and is above blog posts. If not use the drag and drop feature to position the gadget in first position.

  11. Click on the Preview button (eye icon) found in the bottom right corner. Check that the banner is displaying how you would like it displayed.

  12. Click the Save button to apply your changes

If you want to center the banner enclose it in a center HTML tag like this:
<center>YOUR AFFILIATE CODE</center>





Today I have shown you the easy way to add affiliate marketing banners to your Blogger blog (Blogspot blog) in three different positions: in the sidebar, in the footer and above the blog posts. Affiliate marketing banners can generate extra money but do need to be placed strategically. Remember affiliate programs are free to join so it costs you nothing to experiment with positioning your banner to find the best spot.





Related Articles
Make Money from Affiliate Program Banners and Links with Blogger
How to Add a Gadget or Widget to Blogger Above Blog Posts



Subscribe to Blogspot Blogger Guide Full RSS Feed

Subscribe to Blogspot Blogger Guide by Email

2 comments:

  1. Best affiliate programs Can you please guide me regarding that?
    affiliate marketing beginners

    ReplyDelete
  2. Hurry! Excellent Signage service for me Image Printing with my friends. Printer

    ReplyDelete