While browsing often I come across hyperlinks which have icons attached to them signifying what kind of files or pages they are linking to such as a link with a PDF icon pointing to a external PDF download.
After a bit of searching I found that using CSS you can place icons next to hyperlinks which signify if that link will take your visitor offsite, open a popup, or link to a file. Here’s how to implement hyperlink cues in your blog using CSS.
Get the images
First you will need some small size images signifying different kinds of files. Here are some I have collected till now. I will be adding new icons soon. Added 
- A link to an external site that will open in the same window
- A link which will open in a new window
- A link to a PDF file
- A link to a Microsoft Word file
- A link to a music file
You can right click and save these icons. 
Now comes the CSS part which you will need to use these icons in your blog.
Linking to specific file-types
Suppose you are linking to PDF files. Then the file extension is .pdf. So paste the CSS code below in your blog’s stylesheet i.e. between the <style>…</style> tags
a[href $='.pdf'] {
padding-right: 16px;
background: transparent url(pdf_icon.gif) no-repeat center right;
}What this rule does is that it searches for all links in your site which end with .pdf and then places a small PDF icon to the right of the links. The result will be like below, a PDF icon placed to the right side of all links pointing to PDF files.
You can do the same for other file formats by replacing .pdf in the above code with the respective file extensions, like .doc for Word Documents, .xls for Excel Documents etc.
Linking to other sites
If you are creating links to a external site , then it is a good idea to let your visitor know that he will be leaving your site by clicking on that link. To do this, add the following code to CSS
a.external {
padding-right: 18px;
background:url(external_icon.gif) no-repeat center right;
}Now whenever you are adding a link to an external site add class=”external” in its tag. An example of such a link would be :
<a class=”external” href=”http://www.manast.com” mce_href=”http://www.manast.com”>ManasT.com</a>
The rule looks for all a tags whose class is set to “external” and displays a small external link icon as a background image.
Again, if the link you are adding will open in a new window, then add the following code to CSS,
a.newwin {
padding-right: 18px;
background:url(new_icon.gif) no-repeat center right;
}And in the links add class=”newwin”. An example would be,
<a class=”newwin” href=”http://manast.blogspot.com” mce_href=”http://manast.blogspot.com”>The Voice Within</a>
The possibilities are endless
The best part is that the above CSS will work on all browsers inclucing IE6 and Safari. There is no end to how many icons you can add to help your visitor grasp where the link you have added will lead him. But one thing is sure, your visitor’s experience on your site will improve.
In case of any problem, just leave a comment 