Add an Affiliate Banner to a Blogger Header

If your intention is to make money from your blog chances are you will want to add an affiliate marketing banner to your Blogger Blogspot header. Doubtless you have seen plenty of websites sporting advertising banners which are creating revenue for the author by way of banner clicks. With a small amount of tweaking to your Blogger template you too will be in a position to boost the revenue earning capacity of your Blogger blog.


Add an Affiliate Banner to Blogger Header
There are a variety of good places for a banner but the header of a blog is by far the most prominent area. Unfortunately Blogger does not have an easy facility for inserting an advertising banner into your Blogger header. To manage this issue you have two choices:

1. Use a custom template that comes banner ready. (There are a number of templates out there with this feature built-in)

2. Or customize your existing standard Blogger template.

This article focuses on choice 2 - how to go about manually editing your template to add an affiliate banner ad. By the end of this tutorial you will have the necessary knowledge and know how to insert a banner into the header of your Blogger blog. The level of difficulty for the additions I am proposing I have rated as easy to intermediate. You will be adding a snippet of code to your template plus pasting in the affiliate marketing banner code.

For the purposes of this example I will be using a 468x60 banner. I have tested this method of banner insertion on the following standard Blogger templates:

Herbert
Rounders
Denim
Thisaway
Son of Moto
Sand Dollar

It will also work on custom templates that don't already come with an advertising banner in the header built in.


How to Insert an Affliate Marketing Banner into a Blogger Blog

1. Login to Blogger.com and navigate to Layout > Edit HTML page of your blog

2. On the Edit HTML page you will see the option to back up your template by downloading it to your system. I strongly advise that you take this opportunity to backup as you are about to make a change to your template where if something goes wrong you may not be able to restore it.

3. Once you have backed up your template place a check in the Expand Widget Templates box

4. Search your template and locate the following lines of code within the header section of the template:(note you can search by using CTRL + F and entering <b:includable id='main'> into the search box

<b:includable id='main'>
<b:if cond='data:useImage'>


5. Now insert the following 2 lines of code directly below <b:includable id='main'> and before <b:if cond='data:useImage'>


<div class='ads'>
</div>

6. Place your merchant affiliate code between the lines of code you just inserted. You will need to copy the code from the affiliate program provider to your template. If you are yet to sign up for an advertising program such as Linkshare you will need to do so before you proceed. Alternatively you could use my banner code in the meantime to test this banner and later substitute it for your own.

<div class='ads'>PLACE YOUR BANNER CODE HERE
</div>

7. Review the code you have entered. If you have followed the steps above you will now have code that resembles this. (Your affiliate code will of course be different):

<b:includable id='main'>
<div class='ads'>

<a href='http://www.linkworth.com?a=23734' target='_blank'><img align='right' border='0' height='60' src='http://www.linkworth.com/adm/affiliate_manager/affiliate_banners/bann-36.gif' width='468'/></a>

</div>
<b:if cond='data:useImage'>

8. When you are sure you have correctly inserted the code into the template scroll up until you find this line in your template ]]></b:skin>

9. Immediately before this line add the following lines:

/* Header Banner
----------------------------------------------- */
#header .ads{width:480px; height:80px; float:right; padding:20px 0px 0px 0px}

10. Click on Save Template.

11. Click on View Blog to view your new banner.


Troubleshooting

• If you need to change the alignment or padding around the banner to your own specifications you will need to change the CSS stylesheet code entered in Step 9
  
• You can change the alignment of the banner by changing float:right; to float:left; if you would like your banner to left align.
  
• If you change your template for another standard Blogger template you may need to re-enter the code in Step 9.

In this tutorial you have learned to how to insert a 468x60 affiliate marketing banner into the header of your Blogger Blogspot blog and will now be on your way to earning revenue from multiple income streams. Well done!!!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
5 Easy Ways to Make Money from Blogger
Make Money Add Banner Ads to Blogger
Add an Affiliate Banner to a Blogger Sidebar
Add Google Adsense or Banner Above Blogger Header