Adding Link Icon's in Blogger

Most of you have probably seen link icons such as this one . They are designed to make a link more prominent. I have created a small arrow icon that you can use to emphasize a specific link and it is a little more subtle than the page icon.

To create this type of link, you apply a unique CSS class to the link's anchor tag. This code defines the arrow image as the links background. It is then positioned so that it displays to the right of the link text and the color is set to match that of the arrow.

Below is the CSS used for creating and positioning these background images. You will need to add this into the style sheet section of your template. If your not familiar with this part of the template, it is towards the top and comprises a large portion of the code. It begins with this opening tag: <style type="text/css"> and ends with </style> You can add the following CSS anywhere in this section as long as it's after a closing bracket }.

a.special:link{
color: #000000;
text-decoration: underline
background: url(image address) no-repeat 100% 3px ;
padding: 0 12px 0 0;
}

a.special:visited{
color: #000000;
text-decoration: underline
background: url(image address) no-repeat 100% 3px;
padding: 0 12px 0 0;
}

a.special:hover{
color: #000000;
text-decoration: underline
background: url(image address) no-repeat 100% 3px ;
padding: 0 12px 0 0;
}

Notice we have added three different CSS elements. The first defines how the link looks when it has not been clicked and the cursor's pointer is not hovering over the link. The second element defines how the link looks after it has been clicked upon or visited. The last element defines our links look when the cursor's pointer is hovering above it.

Now you will need to enter into the above code the address of the image you want to display during each elements action. For example, if you want the link text and arrow to be red when it has not been clicked, you will enter the #FF000 color code in the place where it says color in our first element above. Then you will add the address of the red arrow icon from the list below. This will be entered between the brackets where it says "image address". You will have to do this for each of the three different elements.

Black Arrow
use text color code #000000
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_blk.png

Dark Gray Arrow
use text color code #999999
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_dkgray.png

Green Arrow
use text color code #00FF33
Use this Image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_grn.png

Red Arrow
use text color code #FF0000
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_red.png

Dark Red
use text color code #993300
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_dkred.png

Blue Arrow
use text color code #0066CC
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_blue.png

Light Blue Arrow
use text color code #66CCFF
Use this image address:
http://i76.photobucket.com/albums/j38/stratman4u/a_ltblue.png

Once you have completed this you can create a special link icon anywhere in your template or post using this HTML format:

<a class="special" href="http://www2.blogger.com/address%20of%20the%20link">Text for your link</a>

The above is a easy method to add link icon's as I have created the images for you. If your savvy and can create your own images that are properly sized, there is a more efficient method that will load slightly quicker. The arrows I use in Blogatech are all contained in one image. I use X and Y positioning to display the correct arrow for the active element. Here is the image I use for this:



Below is the CSS that I use to position these arrows:

a.special:link{
color: #009999;
text-decoration: underline
background: url(http://i76.photobucket.com/albums/j38/stratman4u/link_icon2.gif) no-repeat 100% 0px ;
padding: 0 8px 0 0;
}

a.special:hover{
color: #F87217;
text-decoration: underline
background: url(http://i76.photobucket.com/albums/j38/stratman4u/link_icon2.gif) no-repeat 100% -100px ;
padding: 0 8px 0 0;
}

a.special:visited{
color: #808080;
text-decoration: underline
background: url(http://i76.photobucket.com/albums/j38/stratman4u/link_icon2.gif) no-repeat 100% -200px ;
padding: 0 8px 0 0;
}

If you choose to create your own icon's be sure to leave a considerable amount of white space between each one. In the image above I space the arrows 100px apart.

Technorati Tags: link icons, css, blogatech