Optimising HTML Banner Code
Full disclosure: I don't put many affiliate links on this site because basically I can't be bothered and it earns pennies. However, other people like to do it and these notes might be helpful to them. Non-optimised affiliate banner code has the same effect on me as aberrant apostrophes!
Many affiliate programs will provide code for banners and other graphics for you to use. The code will be correct in that it has your affiliate ID and takes the visitor to the affiliate site but it might not be optimised for your site or blog and it will be up to you to change it.
This is not as difficult as it sounds even if you're one of those people who say "I can't even spell HTML"
I'm using the MyMemories Share the Memories affiliate program code just as an example
This is the banner you will see on many pages throughout this site. Click on it now and see what it does.
Did you notice ...
1) It's in the centre of the page. Not critical but I think it looks better like that
2) It goes not directly to the My Memories site but to another site on this page that explains the deal customers will get and tells them about the tutorial group on Facebook
3) It opens that page in a new window. Normally I don't do this when visitors are going from one page to another in this site since they can find their way around at the top and it would be annoying to have mutiple windows open for one site. In this case, however, I want them to be on this site AND be able to look at the My Memories offer.
You should ALWAYS make a link to an external site open in another window. You spent a lot of time and effort getting visitors to your own site. You don't want to send them somewhere else so that they lose your site and don't come back, even if does make you some money.
2) It goes not directly to the My Memories site but to another site on this page that explains the deal customers will get and tells them about the tutorial group on Facebook
3) It opens that page in a new window. Normally I don't do this when visitors are going from one page to another in this site since they can find their way around at the top and it would be annoying to have mutiple windows open for one site. In this case, however, I want them to be on this site AND be able to look at the My Memories offer.
You should ALWAYS make a link to an external site open in another window. You spent a lot of time and effort getting visitors to your own site. You don't want to send them somewhere else so that they lose your site and don't come back, even if does make you some money.
Here's how to make changes to the code:
First of all copy the code into a Word document or Notepad. You don't want to be making changes on the fly in Blogger or your site builder program. Get the code sorted out BEFORE you put it on your site!
Here's the code MMS provide for that banner:
<a href="http://www.mymemories.com/digital_scrapbooking_software"><img src="http://www.mymemories.com/images/stm/MyMemories-Share-600x158.jpg" alt="" height="158" width="600" border="0" /></a>
Here's the revised code which I used to create the banner above:
<br><br><center><a target=_blank href="http://coastalscrapbooks.weebly.com/mymemories.html"><img src="http://www.mymemories.com/images/stm/MyMemories-Share-600x158.jpg" alt=Save Money on My Memories"" height="158" width="600" border="0" /></a></center></br></br>
I've coloured bit of it so I can refer to them below. Your code does NOT need to be coloured!
Here are the changes I made:
1) target=_blank This is the most important one. It ensures that the MMS site (or wherever you send your visitor) opens in a new window. You might see it in different places but I always put it between the a and the href
2) Blue text: the actual page where I want people to go
3) Green text - to put your banner in the middle of your page. UK peeps not you have to spell center the American way.
4) Orange text. The <br> gives you a few lines' break between sections. It's clumsy and offensive to coders but it works. Feel free to tell me a more elegant way to do this.