What is an Affiliate Account?

An affiliate account lets you be the equivalent of a commission based salesman, getting a percentage of each sale which results from your forwarding people to the place you have an account with.

If you write an article talking about something you sell and make reference to related items which you do not sell, you can turn those references into affiliate links and, should someone follow them and buy the item in question, make a little extra cash by doing so.

Affiliate Accounts for Online Sellers

Of course, sending people to your competition is not typically the best way to increase sales, so you will want to be sure of a couple of things when creating an affiliate account and using affiliate links on your site:

• The people you create an affiliate account with should not be direct competition to you.
  For example, if you sell jewelry, you would not want to create affiliate accounts with places that sell the types of jewelry you sell, especially if their prices are lower.
  Instead, you might check about for affiliate accounts with jewelry cleaning services, people who make custom made jewelry, or any place else which offers items you talk about but does not compete with you directly.
• When placing affiliate links you should make sure that they open in a new window
  If you neglect to do so, people will tend to check out what you reference and then never find their way back to your site.
  Be sure to add target="_blank" to your affiliate links so that your site stays open in their browser when they follow your links.

Amazon Affiliate Links

Amazon can be a good place to get an affiliate account with, though their initial percentages are quite low. The upside is that once you start making more than a few affiliate sales per month your percentage increases to a much more reasonable level.

As an Amazon affiliate, you have a lot of options for creating affiliate links, but I will focus on text links which can be wrapped around images or phrases in your articles.

An Amazon affiliate text link has two parts:

1. The link itself, which contains your referral code
2. A pixel image to track impressions ( page views )

You can use the text link just as you would any other link.

For the pixel image, I recommend creating a custom style that makes the image pretty much invisible and then placing pixels for each link on a page at the bottom of the page.

Pixel Image Styling

To prevent pixel images from showing up on your page in an odd manner, you can create a custom css class for them and add that class to each pixel image. For example:

.pixel-image {
   border: none;
   padding: none;
   margin: none;
   width: 1px;
   height: 1px;
   display: inline;
}

For users of my wordpress theme ( The Privateer ) or the Atahualpa Theme, you can add the above style to your HTML Footer Inserts.

Otherwise, you can add it either in a <style> block inside the header of the html page or a stylesheet file.

Once you do so, you can then put pixel images at the bottom of pages as follows:

<img class="pixel-image" src="…" />

You pixel images will then show up as a list of single pixels at the bottom of your page and most likely not distract viewers.

Affiliate Link Usage

In addition to using them on your own site, you can often use affiliate links anywhere that you can use a normal link.

Some common ways to use affiliate links:

• In an email footer
• In a forum footer
• On sites such as squidoo, hubpages, wetpaint, etc.
• On blog posts

Creating an Amazon affiliate text link

If you setup an affiliate account with Amazon, you can create affiliate links for specific items by doing the following:

Find the page on Amazon.com that has the item you want to link to.

For this example, I’ll use the book "Build Your Own Web Site The Right Way Using HTML & CSS".

While I have not read it, it gets excellent reviews, it is not terribly expensive, and it is could conceivably help people build nice looking sites.

Select the "Link to this page" button

The link looks like the displayed image and is at the top of the page on your affiliate bar when you are logged in.

If it is not there, then log into your affiliate account and make sure to turn on the bar.

Wait for the "Customize and Get HTML" page to load

It should look something like the following:

Select your Tracking ID and Link Type

In the above red outlined sections, be sure to select the tracking id for your site and choose "Text Link".

Once you do so, the page will change to look like the following:

Enter your text and get the html and pixel image

Specify the text you want to use for the link and then copy the html, which will contain both the text link and the pixel image.

If you are using the text link to wrap an image in, you can clear the text within the link without worry.

From there, place the link into your page where you want it, add the above referenced class="pixel-image" entry to the pixel image, and then place the pixel image somewhere on the page.

A completed example link:

Once finished, you can then create links out of various sections of text.

Perhaps you are writing an article on how to use html and css to create nice looking pages for a web site and mention the book Build Your Own Web Site The Right Way Using HTML & CSS to your readers.

Done properly, you can do both of the following at once:

• Provide excellent references for your readers.
• Show them where to get good deals and get paid to do so with no extra cost to them

The informational blurb box

Sometimes you might want a single piece of information to really stand out on a page so that people are sure to see it.

One way to do this is by adding styles to a paragraph, which looks like the following:

Don’t miss this special offer!

The code for the above box is as follows:

<p style="border: 1px solid #000000; background-color: #CCCCCC; font-weight: bold; color: #CE0000;">Don't miss this special offer!</p>

If you want to be able to use style sheets, you could simply make a new style for such boxes like the following:

.callout {
 border: 1px solid #000000;
 background-color: #CCCCCC;
 font-weight: bold;
 color: #CE0000;
}

You could then create the same box with:

• <p class="callout">Don’t miss this special offer!</p>

Atahualpa users could place the callout css in theme options under CSS Inserts via "Appearance" → "Atahualpa Theme Options" → "HTML/CSS Inserts" → "CSS Inserts"

Other themes would generally ahve this placed within the style.css file for the theme.

Another way to do this is by adding styles to a table, which looks like the following:

The code for the above box is as follows:

<table style="border: 1px solid #000000; background-color: #CCCCCC; font-weight: bold; color: #CE0000;">
<tr><td>Don't miss this special offer!</td></tr>
</table>

Of course, you could use a style to make entering this by hand easier:

.callout {
 border: 1px solid #000000;
 background-color: #CCCCCC;
 font-weight: bold;
 color: #CE0000;
}

That would change the table declaration to:

• <table class="callout">

If you wanted links inside, they would need styled as well.

To place the style inline, you would use:

• <a href="URL" style="color: #CE0000; font-weight: bold;">

To place the style in cascading style sheets, you might use the following code:

.callout a {
 font-weight: bold;
 color: #CE0000;
}
.callout a:hover {
 color: #000000;
 background-color: #CE0000;
}

That would cause the link to look like the rest, but make the background turn red and the font turn black when you place your mouse over it.

Here is a little more information on the attributes used above:

Borders

border: 1px solid #000000;

1px

Sets the width of the border as a whole in pixels

2px would make a two pixel border

solid

Tells the browser to draw a solid border

Alternatives are dotted and dashed

#000000

Tells the browser to draw a black border

The notation is #RRGGBB (red/green/blue)

Background:

background-color: #CCCCCC;

CCCCCC is the red/green/blue value to color the border with

Font weight:

font-weight: bold;

Various values available. The most common being bold or normal

Font color

color: #CE0000;

The color to use for text. In this case a shade of red.

Text decoration

text-decoration: underline;

Special decorations for text such as underline, strikethrough, and none.

There are certainly other attributes which can be tweaked, but that should give you some ideas.

The product attributes box

If you want a box to quickly show certain attributes of a product, I recommend using a table like one of the following:

<table width="50%" style="align: center; 1px solid #000000;">
<tr>
 <th>Size</th>
 <th>Weight</th>
 <th>Price</th>
</tr>
<tr>
 <td>Large</td>
 <td>2 lbs.</td>
 <td>$4.00</td>
</tr>
</table>

or

<table width="99%" style="border: 1px solid #000000;">
<caption>Six Things!</caption>
<tr>
<td>
 <ul>
  <li>Thing one</li>
  <li>Thing two</li>
  <li>Thing three</li>
 </ul>
</td>
<td>
 <ul>
  <li>Thing four</li>
  <li>Thing five</li>
  <li>Thing six</li>
 </ul>
</td>
</tr>
</table>

As with the boxes at the top, these tables can have their styles set as well.

Special info on tables:

It is worth noting that in tables, you can specify width to set how large the table will be.

This can be either a flat width in pixels or a percentage of the width available to the table.

You can also set widths on td elements. For example, if you had three columns and wanted all of them to be about the same width, you could set width="33%" in the first two td pieces which would force the third to use the other 34%.

When I create pages, I try to break up the text a bit. Nothing makes most people less likely to read something than seeing a bunch of text all jumbled together.

Using these guidelines, you should end up with readable pages, if not the prettiest…but readable is much better than pretty for selling.

• Use the <p> tag to enclose paragraphs
  • This gives nice breaks between paragraphs.
  • Breaks between paragraphs reduce eye strain.
• Use readable fonts for paragraphs
  • Neat fonts are ok for headlines and such
  • Small text should always be as readable as you can make it.
  • Verdana, Helvetica, and Ariel are excellent on screen fonts.
  • in css, use → font-family: Helvetica, Verdana, Ariel;
• Use lists liberally
  • If you are spouting attributes for something, use a list to do so
  • As a bonus, lists stand out visually
• Use horizontal rules if necessary
  • In some cases, a horizontal rule is just the thing to make a page more readable
  • <hr /> is your friend
• Use header tags
  • When a page contains logical sections, break them up with header tags
  • <h3>, <h4>, and <h5> are your friends
• Use pictures
  • If you have pictures for what you are writing about, consider including them
  • Wide pictures make great text breaks
  • Small pictures can be floated left or right of text to make it less dense
  • <img src="" style="float: left; padding-right: 0.5em; padding-bottom: 0.25em;" />
  • <img src="" style="float: right; padding-left: 0.5em; padding-bottom: 0.25em;" />

Read your own articles

Before you publish a page, preview it and see if it looks readable or not.

Keep in mind that you are probably biased. With time, you will recognize when you could use a bit more readablity without even looking at your pages.

Within wordpress, every theme has a style.css file, which you can see in the build in editor by logging in and going to "Appearance" → "Editor"

The style sheet is what loads by default.

In the below sections:

• classname can be just about any word
  It denotes a custom style class.
• attribute references an html attribute
  It denotes something to be tweaked
  More on attributes below
• value is the value to set attribute to

With the style sheet you will see all kinds of things, but the styling information itself will be in one of the following formats:

General class names

.classname {
attribute: value;
attribute: value;
}

This is a very general method of setting information about tags in html.

In this case, any tag which had class="classname" placed within it would have its listed attributes set to the listed values, provided that the tag supported those attributes and values.

Setting attributes by ID

#idname {
attribute: value;
attribute: value;
}

# denotes an id. By convention, there should only be one of any id per page.

Adding id="idname" within an html tag would give the listed attributes the listed values.

Setting defaults for html tags

htmltag {
attribute: value;
attribute: value;
}

By using an html tag, every instance of the given tag on a page will have the listed attributes set to the listed value.

Most themes will have one of these for the body tag as well as various other tags.

Tweaking items within a classed tag

.classname htmltag {
attribute: value;
}

This type of entry will set the listed attributes to the listed values for the given html tag when it is included within another tag that has the specified class.

For example, an entry such as:

.red-warn tr td {
color: #FF0000;
font-weight: bold;
}

would have the words "some content" set to be bold and red in the following table:

<table class="classname">
<tr><td>some content</td></tr>
</table>

Notice that we placed multiple html tags after the class name. This can get unwieldy, but it can be useful in specifying exactly what to tweak and when.

Atahualpa Users

In atahualpa, text colors and such can generally be edited within the atahualpa theme options rather than within the style.css file.

Inline styling

In many cases, if you just want to set a style directly, you can add the following with an opening tag:
style="attribute: value; attribute: value;"

Doing so will explicitly set the given attribute to the given value.

Common attributes and values

While the list is far too expansive to cover here, some of the most commonly useful attributes and values are listed below.

• color: #RRGGBB;
  This sets the color of an item to the specified red/green/blue index. You can use #RGB as well for a smaller, more reliable set of colors.
• font-size: X%;
  This sets the font size to be a percentage of the normal font size.
  Setting X to a number under 100 decreases the font size
  Setting X to a number over 100 increases the font size
• font-weight: weight;
  Specifies the font weight
  weight: normal bold etc.
• background-color: #RRGGBB;
  Sets the background color of an item to the specified red/green/blue index.
• border: Xpx lineType #RRGGBB;
  Sets the border of an item to be X pixels wide, have the given lineType, and the color specified.
  lineType can be: solid dashed dotted
• margin-left: Xpx;
  margin-right: Xpx;
  margin-top: Xpx;
  margin-bottom: Xpx;
  These set the various margins to be X pixels wide.
  A margin is outside of the containing area of an item.
• padding-left: Xpx;
  padding-right: Xpx;
  padding-top: Xpx;
  margin-bottom: Xpx;
  These set the various paddings to be X pixels wide.
  A padding is inside of the containing area of an item.
• float: where;
  Used for block elements such as images
  Tells it to float to a particular area and have other stuff displayed next to it instead of after it.
  where : left right center top bottom (and more)
• text-decoration: decoration;
  Sets decorations to text
  decoration: none strikethrough underline etc.

As noted, there are a lot of other html attributes out there.

Additionally, different browsers don’t always support all of the same attributes and/or values or show them in the same way.

If you want to edit a particular attribute, do a search for the attribute and the word css.

If you want information on what attributes are valid for particular html tags, do a search for the tag name and the words "css attributes".

For that reason, I recommend knowing how html works as well as at minimum the following tags before you get too in to creating your site.

You can use the visual editor to do quite a bit, but if you make the effort to learn html you can create content that looks exactly like you want it to much more easily.

How HTML works

HTML stands for HyperText Markup Language and consists of two types of structures:

• Content placed between tags
  The tags around the content tell web browsers what to do with the content.
• Content consisting of tags
  There are special tags that tell a browser to do things all by themselves. Such tags do not have beginning and ending tags, but consist of a single tag.

So, when creating content, you can either enter special tags which are, in and of themselves, content or you can enter content within tags which tell what to do with that content.

I recommend always enclosing your content within tags, even if it is simply text.

Common Tags which ARE content

Here are some of the most common tags which are, all by themselves, content.

• <br />
  This is the break tag. It tells a browser to immediately end the current line and place any following content on the next line. One was used to place this information on the line after the tag itself.
• <hr />
  This is the horizontal rule tag. It tells the browser to end any current line of text, place a horizontal line, and start any further items under that line.
• <img src="http://whatever.com/myimage.jpg" />
  This is the image tag.
  You use it to place images inside of your posts and pages.
  As you can see, the URL (web address) for the image goes inside of quotes after src=, which stands for source=
  Some other options that are often useful inside of image tags:
  • width=”"
    The width of the image in pixels.
  • height=”"
    The height of the image in pixels.
• <blockquote>content</blockquote>
  Information to contain in a blockquote.
  A blockquote functions much like a paragraph but is usually styled quite differently.

There are other such tags, but those are the most commonly useful ones so far as I have found.

Common Tags which CONTAIN content

There are a huge number of such tags, but some of the most common (and useful) ones are the following:

• <p>your paragraph</p>
  • This places the text contained within it in a paragraph, providing whitespace between itself and the next items.
  • Use this liberally as it makes text easier to read.
• <b>bold text</b>
  • This makes the text within it bold.
  • While it is supposed to be phased out in favor of "em" I don’t see it happening. When I want bold text I want bold text, not text that might be bold, italic, or who knows what else.
• <u>underlined text</u>
  • This makes the text within it underlined.
• <h3>header 3 text</h3>
  • This makes the text within it a type three header
  • There are h1, h2, h3, h4, h5, and h6 tags.
  • h1 is usually used for the most important item on a page
  • h2 is usually used for the second most important
  • The rest are used for other items of import.
  • Because h1 and h2 are typically for a post title and your site name, I normally stick to using h3 and h4 within posts and pages
  • These are great for callouts and prominent sections of a page.
• <a href="http://somesite.com/somepage">link text</a>
  • This creates a link on the page to the URL http://somesite.com/somepage
  • href="" contains the page or item to link to
  • Further handy things to place within the <a > tag are:
    • title=""
      A title to display on mouseover
    • rel="nofollow"
      • Important for search engine ranking. You should normally have this in links on your site which point to external sitesunless you really want to help the target site rank well
    • target=""
      • This tells the browser how to open the link.
      • _blank means open in a new window
      • _top means open in the current window
      • some-other-text means open in a new window and reference it by the typed text. Further links opened with the same target will open in that same window.

Additionally, there are lists:

An unordered list
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

The above looks like:

• First item
• Second item

An ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>

The above looks like:

1. First item
2. Second item

A definition list
<dl>
<dt>data topic</dt>
<dd>data definition</dd>
<dd>data definition</dd>
<dt>data topic</dt>
<dd>data definition</dd>
<dd>data definition</dd>
</dl>

The above looks like:

data topic

data definition

data definition

data topic

data definition

data definition

And there are Tables

Tables consist of:

• An outer table tag set
  <table> </table>
  All other table tags should be between these two tags
• An optional caption tag
  <caption>caption text</caption>
  This should come after the opening table tag
• Table row tags
  <tr> </tr>
  These define rows. Only table data and table header tags should be within table row tags.
• Table header tags
  <th>some content</th>
  Header elements
  They contain content and come inside of table row tags
• Table data tags
  <td>some content</td>
  These come betwen table row tags to create columns

Each TR tag set should contain an equal number of TD and/or TH tag sets. You can break this rule by making use of colspan and rowspan. If you want to learn to do so, search google for some excellent tuturials.

An example table:
<table>
<caption>My Caption</caption>
<tr>
<th>data 1</th>
<th>data 2</th>
</tr>
<tr>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>

The above would look like:

While there is a lot more, the above are the most common, useful structures for creating clean pages and posts…in my experience.