Friday, September 4, 2009

Changing the Color Style in Blogger, Part II

The next method is to place a style class in the <a href> tag and put this style into the Blogger stylesheet. You can call the style class whatever you want, such as "aaa" or "abc" but it helps if it is descriptive. It would look something like this

< a href="www.glmdesigns.com" class="YOUR-CLASS-NAME">

You'll have to LAYOUT > EDIT HTML. Very close to the top you'll see the first style codes. Find the following (yours may look slightly different depending upon your template):

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

Underneath this place your style code
a:link.YOUR-CLASS-NAME {
color:#YOUR-COLOR-CODE;
text-decoration:none;
}
a:visited.YOUR-CLASS-NAME {
color:#YOUR-COLOR-CODE;
text-decoration:none;
}
a:hover.YOUR-CLASS-NAME {
color:#YOUR-COLOR-CODE;
text-decoration:underline;
}
If you wanted the links to be red and the name of the class to be "myLinks" it would like this:

< a href="www.glmdesigns.com" class="myLinks">
a:link.myLinks {
color:#FF0000;
text-decoration:none;
}
a:visited.myLinks {
color:#FF0000;
text-decoration:none;
}
a:hover.myLinks {
color:#FF0000;
text-decoration:underline;
}

This will do exactly the same thing as what you previously did "in-line" without making a change to the stylesheet. Why would you want to do it this way? If all you were doing was changing the color you probably wouldn't, but if you wanted the link to be bold and underlined or highlighted you would as typing in

< a href="www.glmdesigns.com" style="color:#FFOOOO; font-weight:bold; text-decoration:underline; background-color:#CCCCCC; ">

is a lot more time consuming than:

< a href="www.glmdesigns.com" class="myLinks">

I'm assuming that you don't want to have anything to your links, not style="some-color-goes-here" or class="some-class-name". If that's the case you then need to do two things. Use the blogger tool to make changes to the links inside your posts and second set a style for your right side links: the blog archives, labels and whatever other Blogger widgets you may have.

You'll find that information in the next and last post: Changing the Color Style in Blogger, Part III

No comments:

Post a Comment