Wednesday, May 13, 2009

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 a Banner to Blogger Header - Sand Dollar Header with Affiliate Banner Ad
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>

LinkShare_125x125ButtonV2

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



Subscribe to Blog Know How by Email

34 comments:

Magic Mummy said...

Absolutley brilliant

Thanks so much

The Wizz said...

You're welcome Magic Mummy. Glad to hear that my tips for adding an affiliate banner to Blogger were useful for you. Hope to see you here often

Alex said...

I can't find that code in my template. Please contact me: alex@thegayatheist.com

The Wizz said...

Alex the latest Zinmag Primus template comes with a 468x60 Google Adsense ad unit in the header. You may want to consider upgrading to version 2.0. Zinmag Primus 2.0

pre_anu said...

i can't find the specified code in my template code .. i have been searching for this hack for long .. pls help .. here is my blog :

www.mustknowweb2apps.blogspot.com

email me at : preethianusha@ymail.com

will be waithing eagerly for your response

Thank you .. happy blogging ! :)

The Wizz said...

pre_anu I see you are using the Grungy template. The code block you need to look out for is just after the description wrapper which appears in the header wrapper block of your template. div class='descriptionwrapper' Thanks for your query.

Terence said...

Hi Wizz,

I tested your method and it works perfectly. However, I've been getting error messages for this certain ad I'm trying to place in my header, it doesn't happen for your sample linkworth ad. If I try to place this ad through adding an html element, it works. but if i paste it in edit html, it has all these error messages. Can I email you the ad code so you can check it out?

The Wizz said...
This comment has been removed by the author.
The Wizz said...

HI Terence yes I will take a look at it for you. Sign up as an email mail subscriber and let me know you have here and I will be in touch. Or leave your email here.

Terence said...

Hi wizz! thanks for responding, I was away for awhile. My email is terenceleechan@gmail.com. Contact me there and I will send you the ad code there. Thanks a lot!

Terence said...

Also Wizz,

Do you have an article on how to place the 125x125 buttons side by side?

The Wizz said...

Hi Terence I have emailed you. As to query about 125x125 buttons side by side take a look at my tutorial on adding banners to Blogger sidebar as I cover how to center and add padding etc between the ads

Jovial Mangope said...

Hi Wizz
Your blog is very informative, thank you. I don't have to search google anymore regarding blogger help. I am slowly building ad perfecting my blog, thanks for your help

The Wizz said...

Jovial what amazing feedback thank you. Great to know that my blog is assisting you.

Mike Lebreck said...

I`ve tried very hard and can`t find the code!

Please help... my site is
http://golf-swing-plus.net (rounders)

Thanks, Mike

P.S. I have signed up for your email

Mike Lebreck said...

Hey Wizz... I`m back!

I found the areas to change and did correctly...I think... but got this error code:

We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "ltdiv" must end with the ';' delimiter.

????

Thanks, Mike

The Wizz said...

Hi Mike. Looks like problems with your browser not reading the code. I have emailed you.

Mike Lebreck said...

Wizz,

You are great!!!

I have added the banner to my header.

Thanks for your help, Mike

The Wizz said...

Enjoy your banner Mike!

Noushad Vadakkel said...

I HAVE ADDED A FUNNY BANNER IN MY BLOG. NOW I NEED TO REPLACE IT. I HOPE YOU WILL HELP ME.
MY BLOG MOBILEBLOGES(dot)BLOGSPOT.
YOUR TUTORIAL HELPS US TO MAKE AWESOME BLOGS..
THANKS. PLEASE HELP ME....

The Wizz said...

Hi Noushad. Took a look at your blog but wasn't sure as I couldn't see any banner in the header. What help do you need? I have emailed you also.

venky said...

I got the banner in my blog.I followed exactly what you said.Thanks for posting this valuable information here.

My blog : http://bannershouse.blogspot.com/

The Wizz said...

Glad you got the answer you were looking for here at my blog Venky. I hope you will continue to drop in

hls said...

really appreciate, thank you for your great job!!

kaariye said...

This is something needed. I got interested in it. I made it for my blog.
Look How it works!!!!
Http://hornwatcher.blogspot.com

The Wizz said...

His glad to be of help!

The Wizz said...

Kaariye couldn't access your blog to take a look at your new banner but well done for getting it up and running

Anonymous said...

You are literally a life saver. Looked forever to find this code. Thought i was going mad! Cheers mate, big help.

Hendra Site @ hendra-site.com said...

Thank u so much...:)

xpkocev said...

Laughing out loud! Man I did it.. I can't believe I have done this..
Thanks for the great tutorial and keep doing this.
God bless

SEO Services said...

You are great! Thank you for sharing so useful information!!!

Anonymous said...

thanks

Leo corado said...

I have done it on http://corados.blogspot.com
But I need a few instruction on how to move the banner a little bit to the left so it's not showing on the edge of the border.you can get in touch trough leocorado@gmail.com.

The Wizz said...

Leo the code: float:right; makes the banner align to the extreme right

Post a Comment