Text Links

I chose to add a few text links(hyperlinks) below the dropdown menus of blogatech by adding the following code into my template:

<a href="<$BlogURL$>">Home</a> |
<a href="http://imageshack.us/">Image Hosting</a> |
<a href="http://www.google.com">Google Search</a> |
<a href="http://www.computerhope.com/htmcolor.htm">HTML Color Code</a> |

The basic line of HTML that creates a text link is:

<a href="THE URL ADDRESS">TEXT DESCRIPTION</a>

The area in red is where you would put the address you want visitors to be taken to when they click on the text that is displayed. The area in blue is where you enter the actual text you want to display for that link.

You can also hyperlink to a paticular post in your blog by using what Blogger calls there "Permalink". This is the URL address of where the post resides. For example the address or Permalink for this post is:

http://blogatech.blogspot.com/2006/05/text-links.html

I could add this address in the red area of the above code and when you clicked on the words "TEXT DESCRIPTION" you would be taken to this post.

The text font, size, color and other properties of these text links in blogatech are controlled by these selectors in the style section of the template.

a:link {
color:#c60;
text-decoration:none;
}
a:visited {
color:#7E3817;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}

a:link is the selector that defines the color and decoration of the text link before it has been clicked on.

a:visited is the selector that defines the color and decoration of the text link after it has been clicked on.

a:hover is the selector that defines the color and decoration of the text link when your cursor is placed of that link

a img is the selector that defines if a border should be created around images that have been hyperlinked.