Links - Hover and Rollover Effects

Add an identity to your Blog by customizing the text links in your post and sidebars with nice rollover effects, colors and highlights. Learn how to remove the underline under the links. For the purpose of this article, we have changed our template such that you will see a different text color when your cursor is over the links, and a highlighted background color when the cursor is over the post title. We have also changed our other Blog to let you see a further example of a combination of color and font change for the hover links. In this article, we shall discuss the common effects that you can create for your Blog.

Overview of Link Styles

Blogger templates use Cascading Style Sheets (“CSS”) to define how the pages should be displayed. There are four basic stylesheet entities for links:-

a:link { } a:visited { } a:hover { } a:active { }

a:link defines the style for links such that they stand out from the rest of the normal text.

a:visited defines the style for links that have been clicked or visited.

a:hover defines the style readers see when their cursor or mouse moves over the links.

a:active defines the style to an activated element.

The common rollover effects and styles that can be inserted into the { } are:-

color: #XXXXXX;

Changes the color of the text. By far the most common and effective style. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink;

Set to “none” to remove the underline under the links. Set to “overline” if you want a line above the text or set to “underline” for a line below the text.

font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: lighter;

By default, the font is “normal”, so there is really no need to set it as that unless all your text is in a bold font and you want your hover links to be in the normal font.

font-style: normal; font-style: italic;

A common style used is “italic” for the hover links.

font-family: Verdana,Arial;

The “Verdana,Arial” font is just an example. You can insert the font family names or generic family names that you want as the typeface for the links.

font-size: 85%; font-size: 10px; font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: smaller; font-size: larger;

For percentages and fixed font size, you can specify the values accordingly.

background-color: #XXXXXX;

With this, the background of the text link will be highlighted. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

text-transform: uppercase; text-transform: lowercase;

This changes the letters of the link either to uppercase or lowercase.

border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset;

This gives you a border around the link.

border-color: #XXXXXX;

If you have a border, you may want to specify the color of the border. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

Change Link Styles in Template

Under Template -> Edit HTML, you will be able to find the first 3 stylesheet entities or lines that look like these:-

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

Changing these 3 will do significant wonders to the appearance of your Blog. In the Minima template, you can adjust the colors of the links, visited links, and hover links through Template -> Fonts and Colors. You can manually insert the color values too. Look at these examples and see the effects to understand what you can do to your Blog.

Example 1:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; }

Click this link for an example on how the link changes to red color when visited and green when mouseover.

Example 2:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-size: 120%; }

Click this link to see an example of how in addition to the green, the link is also bigger in font when you hover your mouse over it.

Example 3:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; background: #ffff66; }

Click this link to view an example of a yellow background when you place your cursor over the link.

Example 4:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; }

Click this link for an example of a different typeface or font when you place your mouse over the link.

Example 5:

a:link { color: #0066CC; text-decoration: none; } a:visited { color: #cc0000; text-decoration: underline; } a:hover { color: #2D8930; text-decoration: blink; }

Click this link and notice that the link blinks when you mouseover and it has an underline when you have visited the link.

Example 6:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; border-style: inset; border-color: #D462FF; }

Click this link for an example of a violet border around the link when you hover over it.

Example 7:

You can now combine some of these rollover effects into the link styles. For example, if you want the link to have a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it, you can put all the styles under a:hover as follows:-

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; font-weight: bold; font-size: 120%; background: #ffff66; text-decoration: blink; }

Click this link to see an example of a combination of styles - a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it.

Experiment with the combinations but avoid having too many styles. Be careful when using the font-size, font-family or font-weight as these may adjust the format of the text around the link. Note also that not all the effects are supported by every browser. For instance, Blink works in Firefox but not in IE.

Change Post Title Style

Under Settings -> Archiving, if you have set the “Enable Post Pages” to “Yes”, you will have a unique web page for each Post and the Title will link to that page.

If you want to set a hover style for the Post Title, look for this line and add the styles and effects after that:-

.post h3 a:hover {