Links Hover and Rollover Effects for Bloggersbl

Add an identity to your Blog by customizing the text links in your post title/posts and sidebars with nice rollover effects, colors and highlights. Learn how to remove the underline under the links. For the purpose of this article, I have changed my template such that you will see a different text colors when your cursor is over the links, and highlighted background color when the cursor is over the post title. In this article, we shall discuss the common effects that you can create for your Blog.

Change Blogger Post Title

If you want to change link color, visited link color or hover/mouse over style for the post title.
Go to Blogger > Design > Edit Html search for                       (Tip: Press CTRL+F)

.post h2 a

and add the styles and effects after that...

Add link style in blogspot body search for              (Tip: Press CTRL+F)

a {

Overview of Link Styles

Blogger templates use Cascading Style Sheets (CSS) to define how the pages should be displayed. There are four basic style sheet entities for links;

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

a:link defines the style for links such that they stand out from the rest of the normal text.
a:hover defines the style readers see when their cursor or mouse moves over the links.
a:visited defines the style for links that have been Clicked or Visited.
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, Color Code Generator and Color Wheel

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 link. 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 examle. 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: small;
font-size: medium;
font-size: 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. Color Code Generator and Color Wheel

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.Color Code Generator and Color Wheel

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: #xxxxxx;   < default link color
text-decoration:none;
}
a:visited {
color: #xxxxxx;   < visited link color
text-decoration:none;
}
a:hover {
color: #xxxxxx;   < hover / mouse over color
text-decoration:underline;
}

Changing these 3 will do significant wonders to the appearance of your Blog. 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: #0080ff;
}
a:visited {
color: #e10000;
}
a:hover {
color: #289728;
}

This link changes to red color when visited and green when mouseover it.

EXAMPLE 2

a:link {
color:#0080ff;
}
a:visited {
color:#e10000;
}
a:hover {
color:#289728;
font-size: 120%;
}

In addition to the green, this link is also bigger font when your mouse over it

EXAMPLE 3

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

This hover link has a combination of styles a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it