About   All Tips   Tips by Category   Tips by Ability   Help!

Link Customization- Hover/Underline

Ever want to change the way your links look? Maybe you'd like for them to change color as your readers hover over them. Or perhaps you'd like for them to be underlined.

This tutorial will show you how to do just that.

This tutorial is an intermediate-advanced tutorial based on Blogger's minima template. You will be making some changes to the HTML of your template. It is highly suggested that you download and SAVE a copy of your CURRENT template before proceeding any further. You will not be able to preview changes to your links, so you have to be VERY careful not to change anything other than the information in the places indicated below.

Before beginning, I will suggest that you only change the color of your links and visited links via the fonts and colors section of your blog. Once you've changed the color in the HTML of your template, you will not be able to easily change it in the fonts and colors section anymore. Why mess with something that works pretty good as it is?

Finding the links section- The link codes can be found above the header section.

1. Open up the html of your template (dashboard-->layout-->edit html)

2. Download and save a copy of your current template.

3. Scroll down until you see something like this:


Adding an underline
- In the image above, I have created an underline that will appear when my readers hover over the links that I create on my blog.

1. Decide what you'd like to underline (link, visited link, hover).

2. Look under the type of link you'd like to change and replace 'none' with 'underline' beside 'text-decoration'. Don't forget the ; at the end!

Changing the color of your links
- As mentioned before, I prefer to do this in my fonts and colors section. But, do what you want to do. It is your blog, after all! :)

1. Find the six digit hex codes for the colors that you'd like to use. Click here to find hex codes for any color. You can also get hex codes from the following color charts:
http://www.december.com/html/spec/colorhex.html
http://www.webmonkey.com/reference/Color_Charts
http://www.htmlgoodies.com/tutorials/colors/article.php/3478961

2. Decide which colors you'd like to change. You can change the color of your links, visited links and the color of the links when people hover over them.

3. Replace $linkcolor; $visitedlinkcolor; and/or $titlecolor; (hover) under the type of link you'd like to change with the six digit hex codes of your choice. Don't forget the # sign and the ; after the numbers. EX: If you want your links to turn pink when people hover over them, replace $titlecolor; with #d5617a; .

4. Here's what your section might look like if you changed your links and visited links to black (#000000;) and hover effect to pink:

*********************************************************************************
On this blog, I only want an underline below the links when people hover over them. I also chose to change the color of my links in my fonts and colors section. My code looks like this:

Have fun! :)

0 comments: