--------------- Now playing: Cold by Crossfade ---------------
You probably would like to integrate your affiliate links rather seamlessly into your web site posts or articles. This is good practice, not only from a design perspective, but also because you want your affiliate links to be placed where they'll be noticed and convenient for your readers but without disrupting the flow of your article.
As an example, which GoDaddy affiliate link looks better in the article you're reading right this minute, the first one or the second one? (If they look exactly the same, you may be viewing this post in an e-mail message or an RSS reader. Click on the headline of this article to view it directly on my site. Also, if all you see are text links, the images just haven't loaded yet.)
That's right: the second one looks much more professional. The first one makes your site (well, in this case my site) look amateurish and as if it's kind of broken, possibly causing your readers to feel less confident that they're going to find the solution to their problem at your site. You may think it shouldn't matter, and maybe it shouldn't, but how your site presents itself can have a great effect on its ability to convert visitors to customers.
Wrapping the text is pretty easy in WordPress—all you have to do is choose Left, Center, or Right under Alignment when you insert an image in your post (choosing None under Alignment will result in the first example above, with the text above and below the image). If you're not using WordPress, though, and need to know how to wrap it yourself, here's an easy way to wrap text around an affiliate link neatly, as in the second example.
We're going to use a little HTML and CSS to accomplish this, but don't be scared. It's quite simple, and once you understand how to do it, you're going to find lots of uses for this technique.
In a nutshell, there are two components in making CSS manipulate elements of your design: First you put a rule in the CSS stylesheet that describes how an element on your page should behave, and then you "call" that rule in the HTML that surrounds the item you're trying to manipulate. You might think of the HTML code as "activating" the CSS rule.
The CSS
Let's create a CSS class will tell the text how to wrap. You create a "class" when you need a rule that can apply to several instances (as opposed to an "ID," which can only apply once per page). You may have many affiliate links on a page or site that you want to have the text wrap around in the same manner, so that's why we need a class. Here's how it will look:
.affwrapper {
float: right;
margin-left: 10px;
}
We'll talk about where to put this code in a minute, but first let's discuss its contents. A class begins with a period. Name your class something that tells you what it IS, not just what it DOES. I would use something like "affwrapper" as shown above, short for "affiliate link wrapper," as opposed to something like "alignright," so you know what it's being used for later when you've forgotten what you were trying to do. "Alignright" is too generic. You'll always know that the class "affwrapper" is wrapping text around affiliate links.
Make sure you have an opening bracket { before the actual instructions. It can even be on its own line if you want; it doesn't matter.
The float: right; part tells the browser that the image should be aligned with the right side of your post. The margin-left: 10px; part tells it to leave 10 pixels of space between the left edge of the image and the right edge of the text that's going to wrap around it.
Make sure you keep the semi-colons in place after each line. Then put a closing bracket }.
This may seem complicated at first, but you can definitely copy and paste these bits of code into a document named something like "how to wrap text around images" and put it where you can access it the next time you need to do this so you don't have to type it from scratch each time you use it. And you will be able to type it from scratch before long.
It's also helpful to put a comment line above the code so that later, you'll have an extra hint to help you remember what it's for. As you experiment more with CSS, you'll be glad you inserted these little reminders.
/*WRAPS TEXT AROUND AFFILIATE LINKS*/
The /* and */ are like blinders for the browser; it won't try to execute whatever's between those two things. So your final CSS will look like this:
/*WRAPS TEXT AROUND AFFILIATE LINKS*/
.affwrapper {
float: right;
margin-left: 10px;
}
Now, where to put it? You need to find the stylesheet for your theme. If you're using the default WordPress theme, you will find it in your WordPress dashboard under Appearance > Editor. Click on style.css in the right-hand column. (If you use Thesis, as I do, it will be under Thesis > Custom File Editor in the left-hand column.)
It would be best to put this code in the relevant section, such as Content—the content section begins with this code):
/* =Content
-------------------------------------------------------------- */
But if you're not sure, you can just scroll down at paste it at the end. Make sure you click Update File and you're done with this part!
Additional options
Obviously, if you want to have your images aligned on the left side instead instead or you wanted a greater space between the image and the text, you would simply change the CSS to read like this:
/*WRAPS TEXT AROUND AFFILIATE LINKS*/
.affwrapper {
float: left;
margin-right: 20px;
}
What if you want some affiliate links on the right and some on the left? Then just create two separate classes. You can use the same code as above except you'll have to name the two of them differently (you can use the hyphen as I have to make it easier to read, but you don't have to):
/*WRAPS TEXT AROUND AFFILIATE LINKS*/
.affwrapper-right {
float: right;
margin-left: 10px;
}/*WRAPS TEXT AROUND AFFILIATE LINKS*/
.affwrapper-left {
float: left;
margin-right: 20px;
}
As you've probably figured, you could also add other margins. If the text is too close to the bottom of the image, for example, you could add this to the list of instructions:
margin-bottom: 10px;
The HTML
Now you will "call" the desired class in the HTML of your post or page. Make sure you're in the HTML tab and not the Visual tab.
Let's say you have an affiliate link that consists of an image and a URL from Commission Junction. It would look something like this:
<a href="http://www.anrdoezrs.net/sq112cy63y5LPTUMSROLNMPUORPR" target="_blank" onmouseover="window.status='http://www.godaddy.com';return true;" onmouseout="window.status=' ';return true;">
<img src="http://www.tqlkg.com/lf115uuymsqBFJKCIHEBDCFKEHFH" alt="Summer Savings! $7.49 .com domains at GoDaddy.com!" border="0"/></a>
We just need to put a little bit of code in the image HTML to tell it how to display. It'll be in this "img" part of the above code:
<img src="http://www.tqlkg.com/lf115uuymsqBFJKCIHEBDCFKEHFH" alt="Summer Savings! $7.49 .com domains at GoDaddy.com!" border="0"/></a>
We need to insert this:
class="affwrapper-right"
You could put it just about anywhere in there as long as it's not smack dab in the middle of another tag (such as the alt tag), but I like to be consistent and put the class directly after the image link itself. I've marked the image link in red below, and the class in green right after it so you can distinguish it easily:
<img src="http://www.tqlkg.com/lf115uuymsqBFJKCIHEBDCFKEHFH" class="affwrapper-right" alt="Summer Savings! $7.49 .com domains at GoDaddy.com!" border="0"/></a>
And that's it for the HTML portion of this task! Pretty simple, huh? Once you publish or preview your post, you'll see whether what you've done is working or not. If it isn't, check to make sure you haven't left off any quote marks, semi-colons, or brackets. They may not seem important, but they are. Code isn't very forgiving when it comes to punctuation, because punctuation is what it's all about!
Get your feet wet with this basic CSS and HTML, and you may find that the concept of how they work together to dictate the design of your site will start clicking.
I LOVE my “job.” Affiliate marketing takes work, but it doesn’t feel like work.
Comments on this entry are closed.