Blogger Tips
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:
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:
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
5. Now insert the following 2 lines of code directly below
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.
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):
8. When you are sure you have correctly inserted the code into the template scroll up until you find this line in your template
9. Immediately before this line add the following lines:
10. Click on Save Template.
11. Click on View Blog to view your new banner.
Troubleshooting
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
- Add Affiliate Banner Below Post In Blogger
In today's Blogger tutorial you will learn just how easy it is to place an affiliate banner at the end of each post of a Blogger blog (Blogspot blog). This is a relatively easy task but does require adding a short snippet of code to your Blogger template....
- Add Banner Adsense Above Blogger Header
One of my readers asked me how to add a Google Adsense ad unit above the header of a Blogger Blogspot blog. Rather than post a long reply I decided to write an article about it so that others looking for help to place an affiliate banner or Google Adsense...
- Make Money Add Banners Ads To Blogger
One of the things that makes Blogger such a great blogging platform is the facility to add advertising to your Blogspot blog and make money from it. In this article I will be discussing how banner advertisements on your Blogger blog can make money for...
- Easy Way To Put Banners On Blogger
Beginner bloggers who want to make money from their blog often ask me how to put banners on a Blogger blog (Blogspot blog). In this article I will outline the steps to help you put banners on Blogger the easy way. You will have your banners up and running...
- Making Money From Banners With Blogger
One of the very nice aspects of Blogger is that you can add banner advertising to your Blogger blog (Blogspot blog). Placing a few banners on your blog will allow you to make money and encourage you to stay committed to your blog as well. There is no...
Blogger Tips
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' src='http://www.linkworth.com/adm/affiliate_manager/affiliate_banners/bann-36.gif' />
</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
- Add Affiliate Banner Below Post In Blogger
In today's Blogger tutorial you will learn just how easy it is to place an affiliate banner at the end of each post of a Blogger blog (Blogspot blog). This is a relatively easy task but does require adding a short snippet of code to your Blogger template....
- Add Banner Adsense Above Blogger Header
One of my readers asked me how to add a Google Adsense ad unit above the header of a Blogger Blogspot blog. Rather than post a long reply I decided to write an article about it so that others looking for help to place an affiliate banner or Google Adsense...
- Make Money Add Banners Ads To Blogger
One of the things that makes Blogger such a great blogging platform is the facility to add advertising to your Blogspot blog and make money from it. In this article I will be discussing how banner advertisements on your Blogger blog can make money for...
- Easy Way To Put Banners On Blogger
Beginner bloggers who want to make money from their blog often ask me how to put banners on a Blogger blog (Blogspot blog). In this article I will outline the steps to help you put banners on Blogger the easy way. You will have your banners up and running...
- Making Money From Banners With Blogger
One of the very nice aspects of Blogger is that you can add banner advertising to your Blogger blog (Blogspot blog). Placing a few banners on your blog will allow you to make money and encourage you to stay committed to your blog as well. There is no...