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:

• The Gospel of Links: The Basics
• The Gospel of Links: Text v. Image
• The Gospel of Links: New Windows

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.

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):

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.