Wednesday, March 2, 2011

WotW: The Gospel of Links, part four -- make 'em visible

Thanks for tuning in today for the last sermon in The Gospel of Links, According to Lu. If you missed the three previous sermons, you can catch them here:
And now, my final bit about links: when it comes to text links, make them visible. Not annoying, large-flashing-text visible. Just visible so that readers who come to your blog can clearly see that, Hey, that's a link.

To do this, we're going to use the Template Designer. Have you played around with the Template Designer yet? It's a relatively new feature to Blogger, but it can solve SO many of your HTML and CSS fears and woes and all of those things that can make you feel icky in your gut when you start rearranging your blog.

Before you start playing around with your template, don't forget to save a copy of your template -- then, if you mess anything up or just want to undo everything you did, you can very easily restore that. To save a copy of your template, go to your blog's Design tab, click Edit HTML, and click Download Full Template:

 Save the xml file Blogger provides with a logical name -- like "such and such blog template MM-DD-YY" -- so you'll know what it is now and in the future.

Now that you've saved your template, let's just open up the Template Designer: Go to your blog's Design tab and click Template Designer.

In the Template Designer, you'll see 5 additional tab-like sections: Templates, Background, Adjust Widths, Layout, and Advanced. Today we're skipping the other four and going straight to Advanced.  Deep breath -- this section is actually very elementary. :)

Keep in mind, though, that what you see in the Template Designer reflects what you've already done to your template. For example, if you've customized your template (as I have), you'll see a note that says "you've customized your template" and you won't have as many options in each of the sections of the Template Designer. However, if you're using an unmodified template, you'll have a whole slew of options. If you don't know if your template is modified or not, just go to the Template Designer and it will tell you. :)

For those with non-modified templates, everything we talk about today is super-duper EASY. If you've modified your template (or had someone such as a designer modify your template), it's mostly easy... with one extra catch at the end. Not a big catch, but a difference nonetheless. Only those with modified templates need to worry about the fire-and-brimstone CSS I've been talking about. :)

Okay, back to the Template Designer: In the Advanced section, you can change the font and/or color of most of the types of text on your blog, as well as a few other color areas. Today we are only worried about Link Color, Visited Link Color, and Hover Link Color

Unmodified template users: Click Links to see all three link color options:

Modified template users: I presume you'll be able to see link color and visited link color like I can, separately along the Advanced menu. I'll show you at the end how to work with your hover link color.

Link color is, quite logically, the color that your links will appear. This should be a color that fits with your blog's design (color scheme) but that is a contrast to the main text color. One of my favorite blogs (which shall remain nameless) went through a phase where the links were just a slightly different shade of grey than the main text, making them nearly impossible to pick out as links. (Thankfully, this has been changed now.)

Why is that important? Because if readers can't see that text is a link, they're not going to click on it. And what is the point of making a link if no one knows it's there? So, differentiating your text links by text color allows your readers to easily see and follow your links even if your link doesn't include the words "click here to see _______" or any other verbal cues that it's a link. 

Visited link color is the color that your links will appear after being clicked. This color will show up on different links for you than for your readers, since you've logged clicks on different links, so make sure that the color fits within your color scheme (and not the default purple... ick) since it will definitely be popping up. 

Personally, I don't like having the links that I have visited show up a different color, so I exercise the Bloggy Golden Rule again and blog how I like to read -- I made my blog's link color and visited link color the same color.

Hover link color is the color that your links will appear when a reader mouses over them. This is just an extra visual clue to tell your reader Hey, that's a link. It's not a necessary thing, but it's a nice thing (in my opinion). If you often change the color of words in your posts (to add emphasis and visual punch to your posts, for example), the hover link is a nice way for your readers to be able to differentiate between the text that is just a different color and the text that is a different color because it's a link.

Select the color for your different link colors by either clicking one of the suggested color boxes or by using the color slider:

If you have a specific color from your blog background or elsewhere that you'd like to use, you can find the color code (such as #000000, which is black) by using either Photoshop's eyedropper or Colorzilla (a Firefox add-on, one of my faves) and then typing that 6-letter/number color code into the little box there, making sure that you're maintaining the # before the code.

As you're changing link colors, be sure to check out the changes thoroughly -- there are LOTS of links on your blog that are automatic (such as your archives and labels widgets), so check there to make sure that you're happy with how those look as well.

Okay, this is the point where those of you using unmodified templates can skip to the bottom. Modified template users, read on to learn how to change your hover links... using CSS.

CSS stands for Cascading Style Sheets and the purpose of CSS is to style different parts of your website or blog. Blogger does most of the work for you, building a style sheet as you change the options in the Template Designer, but occasionally you might want to add a style that Blogger doesn't automatically include for your modified template -- like a hover link.

If you already have a hover link set up in your template, it's probably best to just change it there in the code of the template -- to keep everything consistent. Any code you add in the Template Designer will overrule the code elsewhere, but I don't think it will remove it -- and that could become confusing in the future when you try to change things.

It's best to stay consistent and keep the information in the same place and not duplicated and/or overridden elsewhere, so I'd recommend either leaving the code in the template and changing it there or removing the code there and inserting it in the Add CSS section of the Advanced section in the Template Designer.

Regardless of where you put it, the code for your hover link should look something like this highlighted part (use ctrl+F and use the Find function of your browser to find it quickly in your blog's template):

Don't forget the proper punctuation:
the { and } and ; and : are all important!

Just copy/change this code either in your blog template or in the Add CSS section of the Template Designer.
color is the 6-digit hex code for the color you want to use -- remember you can find that using Photoshop's eyedropper tool or Colorzilla.

text-decoration is most commonly either none (like mine) or underline. There are a few other options as well, but... sometimes they just shouldn't be used regularly. :)

{welcome back, unmodified template users!}
So, now you have a link color that stands out from your normal text color, both when it's just sitting there and when users hover over it. Hooray! Hip hip hooray for visible links!

And this concludes The Gospel of Links, According to Lu. Did you learn stuff? Any burning questions I've left unanswered?

PS - If you're interested in learning more about HTML and CSS, I'd recommend reading this Ask the Expert post from the SITS Girls and then consulting W3Schools like they recommend -- that's where I go! :)

Lu (or Lorene if you prefer) is the mom of one squirmy boy and the wife of a singing and dancing elementary teacher. She is the proud author of this weekly Wednesdays on the Web (WotW) segment here on Housewife Eclectic and spends the other days of the week blogging about crafts and whatever else comes up at just Lu.


Jocelyn Christensen said...

I cannot believe you just called my blog out in your bad example! Guilty as charged!

Lu said...

Jocelyn, even though your blog *is* one of my favorites, you were definitely not the offending party. And since the offense is extremely minor and has since been rectified, let's let bygones be bygones, eh? :)

Gwen @ Gwenny Penny said...

Good info, Lorene. I hate when I visit a blog that doesn't use a different color for their links. Then I have no idea if I can click on any text or not. I just went and changed my visited link color to match my link color:)

jennykate77 said...

Great tips!! I always use a different color for my links, but I hate when other people don't! I mean, how are you supposed to know when a word is linked up??

Love your blog!