This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. 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.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
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!

Aug 10, 2007

Digg This Story

Hover Links and Rollover Examples

These are the examples referred to in the article on Links Hover and Rollover Effects.

Example 1:

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


This 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%;
}


In addition to the green, this 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;
}


You can now see a yellow background when you place your cursor over it.

Example 4:

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


Do you see a different typeface or font when you place your mouse over this link?

Example 5:

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


Notice that the link blinks when you mouseover and it has an underline when you have visited the link. This works in Firefox but not in IE.

Example 6:

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


Inset Border

Notice the violet border around the above link when you hover over it.

Example 7:

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;
}


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.

For details on where the code can be inserted in the template to change the effects of links in the sidebar and Post title, please refer to the article on Links Hover and Rollover Effects.

© Tricks 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

3 comments:

Thomasvsxc said...

Erm, i saw some links in my frnds blogs when rollovered, the bottom bar of the internet explorer has some other text, instead of the website that you'll be directed to.

For example, i scroll my mouse over to a link named 'VALERIE'.

then the bottom bar of the IE shows something like 'CLASSMATE! :D'
instead of the website of the link.

Can you help me on this?

Eric said...

Great article on changing the hover effect on links. Very clear and you even posted some excellent examples. May I make only one recommendation when it comes to colors. Simplicity is the key when it comes to tutorials for beginners, so perhaps get away from using hexadecimal colors at first and use plain English colors (e.g, 'red' instead of '#ff0000', etc). Just a thought. Thanks for the great site!

disciple said...

Is there any way to incorporate this "mouseover" effect to generate a small popup while hovering over links? I've got references (words) on my page that need a definition described when viewers roll their mouse over it. I'm not looking to popup another page or site, just a brief definition...text!

I've tried tons of javascript with only one that actually did what I was looking for...problem with that script, it would not change the Xoffset and Yoffset. Popup was to far away from link!

BTW, I'm trying to accomplish this in my posts...not the sidebars, headers or footers.

I found that If I made them a hyperlink and gave it a title attribute, that popup works great, except the font is too small, bg color is unchangeable and the message disappears without user input! Great idea though...maybe CSS?

Any suggestions? Thanks~