All right then!
A commenter asked me how did I manage to apply mouse over link hover effect to my Blog.
First thing first.
What is a link hover effect?
Answer:
How did I get hover effect in Blogspot?
In blogspot a link has four properties attached to it
For hover effect, we are concerned with the property
It is quite simple actually
This requires making changes to the HTML code of the blog.
For the beginner this might be useful:
Also, remember to backup the template first using Download full template option. This is the most important step. I can’t tell you how many times I have muddled my template without taking a backup and later regretting it. It was good learning but you can act smarter. In case of any problem one can revert to earlier state by uploading the backed up XML file.
The basic template for this blog is Minima that I have modified into a three-column template, but these would apply on all Blogger template.
In the code search for the lines
Replace or change these lines to:
Similarly, you can manage many other effects like changing the text color of the links and highlighting the background color when the cursor is over the post title.
-0-
For more drastic effects, I would suggest this blog having great tips for new bloggers. Found it quite useful in my early days of blogging.
A commenter asked me how did I manage to apply mouse over link hover effect to my Blog.
First thing first.
What is a link hover effect?
Answer:
Julia was the commenterOn moving the mouse on the link, the way link is displayed, changes. In the above case, the link gets an underline, an over line and the font size of the link increase.
How did I get hover effect in Blogspot?
In blogspot a link has four properties attached to it
a:link { }here actual attributes are given inside {}
a:visited { }
a:hover { }
a:active { }
For hover effect, we are concerned with the property
a:hover { }
It is quite simple actually
This requires making changes to the HTML code of the blog.
For the beginner this might be useful:
Also, remember to backup the template first using Download full template option. This is the most important step. I can’t tell you how many times I have muddled my template without taking a backup and later regretting it. It was good learning but you can act smarter. In case of any problem one can revert to earlier state by uploading the backed up XML file.
The basic template for this blog is Minima that I have modified into a three-column template, but these would apply on all Blogger template.
In the code search for the lines
These would be followed by following lines of code:
body {
margin:1;
font:$bodyfont;
background:$bgcolor;
color:$textcolor;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
Replace or change these lines to:
That’s the simple code for my blog to great effect.
a:hover {
color:$titlecolor;
text-decoration:underline overline;
font-size:20px;
}
Similarly, you can manage many other effects like changing the text color of the links and highlighting the background color when the cursor is over the post title.
-0-
For more drastic effects, I would suggest this blog having great tips for new bloggers. Found it quite useful in my early days of blogging.
thanks, i try this on after i write this comment, i'll update u!
ReplyDeletei can't do it!
ReplyDelete(btw, my readers are going into your blog, because they think your blog is connected with that $candal. haha)
Julia,
ReplyDeleteI can see that links on you page do change color on link hover. They red. Adding the line
font-size:20px;
Would change the font. It quite simple.Do try.
Those stories do get a lot of traffic. I did get a lot of hits from your blog. :)
i already do it!
ReplyDeletebut i only change the font size not the color,
thanks for the help.
(at first i can't find that line of code!)
thank u very much! =)
Glad to be of help.
ReplyDelete