How To Add An Affiliate Banner To The Header Of Your Blogger Blog

Your Ad Here

 

If you are interested in making money from your blog, chances are you will want to add an affiliate marketing banner to the header of your Blogger blog. 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 rather simple tweaking to your Blogger template you, too, will be in a position to boost the revenue earning capacity of your Blogger blog.

How to Add an Affiliate Banner to the Header of Your Blogger Blog

There are a number of good places for a banner or an ad block, but the header of a blog is by far the most prominent area. Unfortunately, Blogger does not provide an easy facility for inserting an advertising banner into the header of your blog. To manage this 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. Customize your existing standard Blogger template.

This post focuses on choice # 2 and shows you 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 to insert a banner into the header of your Blogger blog. The level of difficulty for the necessary additions is easy to intermediate, so pretty much everybody should be able to get this done in a matter of minutes. You will be adding a few lines 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. This specific method of banner insertion has been tested on the following standard Blogger templates:

Herbert
Rounders
Denim
Thisaway
Son of Moto
Sand Dollar

It will also work on most custom templates that do not 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.

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 you may not be able to restore it if anything should go wrong.

3. Once you have backed up your template place a check mark 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 (better still, copy it into a program like Word , piece the parts together, and then copy and paste the complete code into your template). If you have not as yet signed up for an advertising program such as Linkshare or Chitika 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=https://chitika.com/publishers.php?refid=********** style="text-decoration: none;"><img src="http://scripts.chitika.net/eminimalls/logos/468x60.png" border="0" height="60" width="468" alt="Get Chitika Premium" title="Get Chitika Premium" /></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.
• Sometimes the code you get from your affiliate may be incomplete. For instance, some of Chitika´s banner codes are missing the specifications for height and width. In this case you will have to enter height=".." and width=".." yourself.
• If you change the size of your banner you will have to change the specifications of the code you inserted in step 9 as well.

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

Good luck!

 

Related Article:

How to Add an Affiliate Banner to the Sidebar of Your Blogger Blog

 

Technorati-Tags: ad placement,adding affiliate banner,affiliate marketing,make money,monetizing blog,how to