BlogKnowHow apologies for the technical problems with the site. We are working on it and hope to resolve the issue as soon as possible.

Saturday, April 4, 2009

Add an Affiliate Banner to Blogger Sidebar

A lot of people want to make money from their blog and for this reason want to learn how to insert affiliate banners into their Blogger Blogspot blog. In this Blogger tutorial which is the first of a series I will show you how to place a banner in the sidebar of your Blogger blog (Blogspot blog).

Even if you are new to Blogger and have very little technical knowledge this tutorial is still suitable for you as I will guide you through every step in the process of adding a banner ad to the sidebar of your Blogger blog.

Banner Advertising is an Effective Way to Make Money from a Blogger Blog - Here is a cluster of 3 125x125 banner ads
How to Add an Affiliate Banner To the Sidebar of Your Blog
It is relatively easy to add an affiliate banner to the sidebar of your blog.

1. Sign up with an affiliate marketing program like Commission Junction and select your merchant

2. Decide on the size of the merchant banner or banners you wish to display in your sidebar making sure that whatever you choose will fit into the sidebar space otherwise your banner ad may not display properly on your blog. Typical sizes suitable for sidebars are:

  • small rectangular banners 125x90 or 125x125

  • square banners 200x200 (if space allows)

  • short vertical banners 120x200

  • long column style skyscraper bnnners 120x600 or 160x600

3. Choose your banner and you will be presented with the merchant code to display the banner. Right click to select all and right click again to copy the code to the clipboard of your computer

4. In a new window login to Blogger and navigate to Design > Page Elements

5. Click on Add a Gadget in the sidebar. If you are using a customized template you may have 2 different sidebars so decide which you want the banner ad to display in.

6. Select HTML/Javascript widget from the Add a Gadget menu

7. Place your mouse in the content box of the Configure HTML/Javascript widget and right click. Choose paste to insert the merchant code of your banner ad into the content box

8. In the title box add a Title like Sponsored Ads if you wish otherwise leave it blank

Paste Merchant Code of your banner ad into Configure HTML/Javascript content box
9. Click on Save

10. Using Blogger's drag and drop feature to pick up your new HTML/Javascript widget and position it where you want your banner ad to show up in your sidebar.

11. Save your layout

12. Click on View Blog to see you new banner ad in action.

Add Space Between Your Banner Ads
If you want more space between your banner ad and the previous widget you can add <p> before the code your inserted in the HTML/Javascript widget. If you need even more add another <p>

To Center Your Advertising Banner
If you want to center your banner ad insert <center> before the merchant code and </center> after it.

Add More Than One Banner
If you want to add more than one banner ad to the same widget you can just by pasting the code for the second banner ad below the first lot of code. If you want some white space between the banners ads insert <p> between each lot of code.


Your Banner Does Not Display
Your banner ad should appear right away. If your banner ad doesn't display at all then there is a problem with the widget you have just created. Retrace your steps making sure you have got all the code.

Only Placeholder for the Banner Displays
If you see a placeholder but no ad displays then the affiliate website may be off line or there is a problem with the code in some way. Go back and make sure you copied all of the code correctly

In this Blogger tutorial you have learned how to add an affiliate marketing advertisement banner to the sidebar of your Blogger blog (Blogspot blog) and about some common problems that you may encounter. In my next tutorials on banner advertising I will show you how to place a banner in a variety of other spots on your blog including the footer, above the first post and in the header. Why not bookmark this site so you can return easily?

Related Articles
Make Money Add Banner Ads to Blogger
How to Add an Affiliate Banner Below a Blogger Post
How to Add an Affiliate Banner to the Blogger Header
Add Google Adsense or Banner Above Blogger Header
List of Blog Know How Blogger Tutorials

Subscribe to Blog Know How by Email


Majid said...

Can I use adsense and affiliate network banner on same blog.

The Whizz said...

Yes you can add affiliate network banners and Google Adsense to the same blog. You are allowed 3 Google for content ads and 3 Google linked ads. In addition you can have other non Google advertisements on the page. The number of these is not limited in anyway by Google.

smallste said...

Hi man thanx your blog is really helping me to develop my own blog as it is my first one I am trying to add banners to my blog but unfortunately my add gadget button does not seem to be working do you have any idea why this is.
thanx again.

The Whizz said...

Hi smallste. Pleased to hear my blog is helping you out.

If your add a gadget link in Blogger is not showing up on the layout page read the Missing Add a Gadget post for help.

If its something else please explain a bit more about the problem and I will try to help.

Esco Columbo said...

hi, i've tried placing an affiliate banner at the bottom of my page but can't seem to get it working.

i place the html code but it doesn't show up on my blogpage.

please help

Esco Columbo said...

p.s. here's my page

does it take some time for the banner link to show up, like 24 hours or something?

The Whizz said...

Hi Esco Columbo. I visited your blog. I saw your banner at the bottom of your blog is working now. Could do with centering though as it is displaying partially off the page. Thanks

Esco Columbo said...

hey wizz, you're right about the banner. how do i center it?

also, do you know how i could resize the banner without messing up the flash image. whenever i resize the pix the flash seems to disappear

The Whizz said...

Hi Esco Columbo. The reason why you can't use normal centering techniques with your banner is that it is too long for the space. One way to make it fit is to reduce the padding. Change the footer in your template:

padding-$startSide: 95px;


padding-$startSide: 65px;

Also note that with merchant banners there is usually a condition which specifies that the banner can not be changed without specific approval so I would advise against messing with the dimensions of the banner.

Good luck!

psakamoori said...

I am trying to Get the links of Advertiser from CJ but..all the requests are getting declined..what mite be the reason for this

The Whizz said...

Special Gift. I think it makes a difference depending on whether you are a USS visitor or not. Also you could try Linkshare

justj0king said...

it worked perfectly!
thank you!

The Whizz said...

justjOking thanks for giving me an update on how you got on with adding banners to your blog. Glad to hear it is working for you

Unknown said...

This seems really helpful, but it doesn't work for me. I use blogspot and I have a "template" not a "layout" and am unable to proceed past the third step of your instructions above. What can someone like me do to add affiliate links to my blog?

The Whizz said...

Hi Naki. For Step 4. At the Dashboard of Blogger when you first login you will see the name of your blog under Manage Posts. Under that will be the number of posts and then a row of links that say: New Post, Edit Posts, Settings, Layout, Monetize. Click on the link that says Layout which will take you to the Page Elements page. You will know you are on the right page because it is headed up Add and Arrange Page Elements. From here you will be able to Add a Gadget to the sidebar at Step 5.

Also note that the words layout and template are often used interchangeably in Blogger.

Hope this explanation helps you. Good luck.

Unknown said...

When I try to paste the code, it does not paste. I copied it twice, I am on a mac. Any ideas?

The Whizz said...

Not much knowledge of Macs sorry Maria. Seems to me though that it ought not to make a difference to ordinary cutting and pasting activities. Have you tried pasting the code into notepad (or Mac equivalent) and then copying it from there to paste it into your Blogger HTML/Javascript gadget

Sasanka Santhajeewa said...

i tried. but came a msg like this (Your request could not be processed. Please try again.) Y?

The Whizz said...

Hi Sasanka. This sounds like an issue with Blogger which happens from time to time. If you try again it ought to work. If it doesn't please come back to me and I will endeavour to help you.

Michael Newman said...

A very enriching blog.Keep up the good work.

The Whizz said...

Thanks Michael for the vote of confidence

Akseslisensi said...


Ankit Singla said...

Please tell me how to make a new sidebar as you done into your blog. When I choose the same template I got only 1 sidebar and you have 2. How you did it. Please give the way to do same.
Check my blog

Ankit Singla said...

Please reply for my query??

The Whizz said...

Ankit there are a lot of coding changes needed to add an additional sidebar to the template. Not something I can explain on a comment. Leave your email address and I will email you the instructions. Thanks for your query

Jay Nova said...

Hi there,

Your are very informative, so many valuable how to info, will definitely come for some more.

Keep it up

suchismita said...

Thanks a ton.. you are a lifesaver for tech challenged people like me. Now if only I could magically learn to link my own posts in an attractive way. I'll look for the magic here and hope to find it... :)

payitforward said...

hi, thanks for this post but i looked for the html/javascript gadget and it's not available anymore? please help. thanks.

sojjy said...

Thanks, I was searching all over the web for this functionality! Thanks again!

The Whizz said...

The html/javascript gadget is definitely still in the list of gadgets to be added but you do need to scroll down to find it. Good luck :-)

Jade said...

Hi! Thanks for the great post and all the information. You really help a lot.
Do you have an article on how to insert affiliate codes inside the post? The same way you would insert a picture in the post. Is this possible?

I'm new to affiliate programs so not so sure how to use them. Is it possible to link to a particular product instead of the whole affiliate website?

Please help!!!

The Whizz said...

Hi Jade. Yes you can add affiliate code to link to a single product or to the whole website. Your affiliate marketing company will provide you with the code and if you have queries about how to link to a single product best to ask them for the code.

In terms of putting affiliate code into a gadget or widget on your blog take a look at the picture under step 8 which gives you an example of some affiliate code inserted into a Blogger widget. To add affiliate code click on add a gadget and place the code between <center>Affiliate Code Goes Here <center/> if you need the code centred inside the Javascript HTML widget otherwise just post it directly into the widget without the center tags. If you need any further help come back to me and I will take a look for you.

Also take a look at this tutorial for information about how to put affiliate banners inside posts and other places on Blogger

Barn Dogs said...

HI, I am also very new to this. I followed the directions for adding an affiliate banner and it showed up immediately, but if I click on the "learn more" button instead of taking me to the site I get a message that says "Sorry not sure what you are looking for Go Back (which takes me back to the blog page) Is something missing from the code?

Magie said...

Hi there, i need some help, i have a 468x60 banner on the top right of my header, i want to replace it with an advertising banner but don't know how or where to put the code, the place of the banner is exactly like the chikitka banner on the top of this blog.

this is my blog :

any help would be appreciated

Thank You

The Whizz said...

Hi Magie. Try the following Blogger tutorials:
Add a Banner or Adsense Above a Blogger Header

Add a Banner or Google Adsense to a Blogger Header

If you still have problems then by all means come back to me. Thanks for your query

The Whizz said...

Hi Barn Dogs. When I visited your blog I saw you have a bunch of banners in your blog's sidebar. If the banner displays correctly then the problem will be in the affiliate code you have entered. You will need to check the code with the affiliate marketing company you are using. Good luck!

affiliatenewbz said...

hi thank you my friend for this blogpost this is very imformative this way I can do it using your tricks

S.P said...

thanks a lot bro!
useful post for newbie.

Unknown said...

Thanks for the post! I'm running a blog about smartphones and being able to add a banner really helps :)

Werbeplanen said...

such a lovely and well written post.

Werben Banner

Post a Comment