Changing the Color Style in Blogger

I'm assuming you read the previous post and want more information in how to change the color of your links in Blogger.

Putting in color may seem a little strange at first. Although you can use color names such as red and blue it is better to get comfortable using hexadecimal notation.

Color is put together differently on a monitor than you might be used to with paint and canvas. Add Red, Green and Blue paint and you get mud. Add Red, Green and Blue light and you get white.

There are billions of color combinations, using names such as red, cherry-red, burgundy is not an option. Instead one describes the color using a number system. A hexadecimal notation system (16 numbers) is used.

0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F

One set of numbers was not enough so two numbers are used for each color. A notation of 00 means that no light of a particular color is used and FF means that a 100% is used.

To display black one uses no red, no green and and no blue: 000000

White is 100% red, 100% green and 100% blue: FFFFFF

You can see this in Blogger's LAYOUT > FONTS AND COLORS.

First step is to get comfortable in your site. Go to NEW POST, select the EDIT HTML tag and make a link as you usually do (type in some text and highlight it)



Afterwards you will have this : <a href="http://glmdesigns.blogspot.com">Place Link Here</a> add style="color:#COLOR-CODE-GOES-HERE;" into the <a href> tag. If you want the color black the code is #000000; if you want red the color is #FF0000. You can experiment in the blogger LAYOUT > FONTS & COLORS section to get the color and color code you want.

If you wanted red the code would like this:

<a href="http://glmdesigns.blogspot.com" style="color:#FF0000;">Place Link Here</a>

This is the code in action

This was the easiest of the three methods: place the entire style into the link. The problem with this method is that you have to do this each and everytime you post a link.

For more see Changing Color Style in Blogger Part II

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

Changing the Color Style in Blogger, Part III

After all that, I hope you're ready to make the changes. If you've never made any changes to your template before you don't need to worry about ruining your site as Blogger has a "Revert widget templates to default" link. If things go kablooie click on the "Revert widget templates to default" link and everything will go back to what it was.

If you have made changes before then I assume you know that you need keep a back-up copy just in case. Otherwise the "Revert widget templates to default" link will erase all your previous changes.

First thing to do is to make certain that you like the class name. I think it is good practice to use descriptive names. In this case "sideRight" or "sideLink" or what-have-you. If you want a different name go back into LAYOUT > EDIT HTML and change the name of your style.

Then you'll have to add the class name to all the links on the right side. Don't worry if you have lots of links, you won't have to make many changes. HOWEVER this will probably be your first forray into changing server-side scripts so it will be a little different than what you're used to.

To test this out and to give yourself confidence to a CTRL F (to find information on a page) and type in "href" in the text box. You will probably have two matches. Go and verify that for yourself. Now select "Expand Widget Templates."

Here's where the confusing part comes in. You have to find the correct href to make changes too. If you're labeling your widgets you'll have an easier time. For my first few changes I searched for the WIDGET label, then it's easy to see where to make the change. The first image shows the text as I found it. The second one with the class added to

CLICK ON THE IMAGE TO SEE IT LARGER AND CLEARER

CLICK ON IMAGE TO SEE IT LARGER AND CLEARER

You'll see that I called the style "side". I did that to keep all the code lined up from image to image. Side is a bad name. It's not descriptive enough and there are too many "side" to do an efficient search. "sideRight" is a far better name.

Remember, after you make a change. Save it, take a look at what you've done. You can always reverse it later.

How to Organize your Programs in Windows

Maybe it's because it's a pet peeve of mine but I hate going seeing unorganized programs on a client's machine. Each time I mention it to someone I get the same "I didn't know I could organize my programs."

On XP right-click on the START button and select Open All Users. Select Programs and then create folders and move programs around as desired.

Microsoft versus i4i: Patent Trolling or Patent Infringement

There's a good article in eWeek, Patent Ruling Against Microsoft Hinges on Meaning of Custom XML, reviewing the patent infringement lawsuit between i4i and Microsoft.

Here's the kicker: Reading through the decision, it's almost as if both the jury and judge felt that the XML editor portion of Word was the only place where XML was being used (it's not) and that this is where the alleged metacode data structure was being created (doubtful; if there is one, it would be created elsewhere).

One of the problems I have with this lawsuit is that the process which was "patented" in 1994 had become commonplace five years later - without i4i doing anything to bring it into the market. It seems more and more to me like patent trolling to me.

Meta-Tag Generators, Which is the best?

Readers of this blog know that I've been saying, for a long time, that META tags are not very useful and, for the most part, not worth your time. Do not waste your time and money developing META tag generators. META tags will not help you get your site ranked higher.

The only value of META tags is that accurate META tag information may help in clickthrough. Google and other SEs will sometimes display the META description in their results page.

See Meta Tags and Title Tags

AOL, Google & Facebook

At one time AOL was the 800 pound gorilla. They were the social networking site of the 1990s (and I must say that I ridiculed the idea at the time). AOL tried to be the portal by which we all entered the web. They failed. At one time people feared the rise of Microsoft. Now Microsoft has become like AT&T: last years powerhouse and today's ho-hum large corporation.

What will become of Google and Facebook? Combined they will make one hell of a team.