These are the examples referred to in the article on Links Hover and Rollover Effects. These can make your blog look more attractive and nice look,. check these out:
Example 1:
This link changes to red color when visited and green when mouseover.
Example 2:
In addition to the green, this link is also bigger in font when you hover your mouse over it.
Example 3:
You can now see a yellow background when you place your cursor over it.
Example 4:
Do you see a different typeface or font when you place your mouse over this link?
Example 5:
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:
Inset Border
Notice the violet border around the above link when you hover over it.
Example 7:
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
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
2 comentarios:
really?
Kirain Blog Siapa Tadi ne,, English :-D, Thanks
Post a Comment
thx for all the comments.... :'']