Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

May 20, 2007

Digg This Story

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 {


Further reading:-


For specific text link and image link codes, you may read the guide at Hyperlinks and Image Links (I).

If you want to remove link underlines or have the underlines only in the Blog Posts or Sidebar areas, look up our guide at Remove Underline Below Text Links.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

7 comments:

BlogmasterPg said...

Hi, Jim, I'm BlogmasterPg, from italy ( I'm sure You remember me..) I write to You for appreciate this last work and to make to you my congratulation for your work in Googlepages and for all your ranks, very good!!! If you remember I had raccomandet to you to open and to make some tutorial for googlepages, i hope you take in considewration my words. And... When you'll do a tutorial for wordpress? I'm waiting!!!Ok, the only bad think that I don't read the other your blog about novels, too many difficult for my bad english language. I hope you came to see my blogs, one your comment swill be very appreciate. This is my Home Blogs Page...

BlogmasterPg said...

Aniway i write something in my blog: http://blogmasterpg.blogspot.com/2007/05/big-blog-from-big-man.html

BlogmasterPg said...

Delete the last comment, i think to do some mistake.. this LINK is 4 you.

bizwhiz said...

Hi Blogmasterpg

Thanks. I still have your mail about Googlepages and Wordpress. I will let you know when I have a guide on that.

By the way, you remember asking about translation from Italian to English? If your friends are interested in translating their Italian pages into English, I have updated the Language Translation article to include a guide on translating Blogs in other languages into English.

Tigre de Fogo said...

Hi, first of all, you have a great blog with a great and useful information, congratulations! Second, sorry for my poor English.
My question is: I was trying to insert underline decoration on the links that is placed just on the body of the posts. Did you know how can I do that?

Thanks in advance.

bizwhiz said...

Hi Tigre de Fogo

I have just addressed your query in this article Remove Underline below Text Links. You may want to have a look.

Web design and Web development said...

Its indeed a cool blog ; I saw a many others .....But you are out of the league...