Customizing Blogger Links

On Blogger.com the layout is controlled using CSS. You can find the CSS commands in the <head> </head> of your blog. To be extremely specific... the <head> </head> tags lay between the <b:skin> </b:skin> tags.

Now you have a quick lowdown on where you can find the link commands and how they live.

Here's what they look like by default and what they mean:

a:link {
color:$linkcolor;
text-decoration:underline;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:underline;
}
a:hover {
color:$hoverlinkcolor;
text-decoration:none;
}

a:link = active and unvisited link.
a:visited = active but visited link.
a:hover = active link that could change when the cursor hovers over it. (mouseover)

The coding above is a simple default and you can easily change it. Blogger uses these defaults so the CSS can easily be manipulate by the WYSIWYG (What You See Is What You Get) editor. You can change the font type and the colors by using the "fonts and colors" option under "template". But is you want to use your own colors then just remove "$linkcolor", "$visitedlinkcolor" and "$hoverlinkcolor" to the color name or using hexadecimal color codes.

If you want to remove the underline, just remove "underline" and replace it with "none". Now here are some tricks to make your blog slightly different than others. If you place "underline" in the "a:link" and "a:visited" and then add "overline" to "a:hover". This will move the line from the bottom to the top of the mouseover link.

Now if you want a TOTALLY different look and feel to your links then play around with these attributes:
border-top:thin dotted yellow;
border-bottom:thin dotted yellow;
border-left:thin dotted yellow;
border-right:thin dotted yellow;

Thin = the actual thickness of the border.
Attributes are = [thin - medium - thick]
Dotted = the actual format-type of the border.
Attributes are = [none - hidden - dotted - dashed - solid - double - groove - ridge - inset - outset]
Yellow = the color of the border.
Attributes are = unlimited by web-safe 16 color names or hexadecimal

The possibilities are endless and with CSS... it is an endless and easy trip. Good luck with your trip. And those who are daring enough:
http://www.w3schools.com/css/default.asp

No comments:

Post a Comment