Retrograde. Bamboozlement! More Bamboozlement!

Link Hover Effect for Blogspot

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:
Julia was the commenter
On 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 { }
a:visited { }
a:hover { }
a:active { }
here actual attributes are given inside {}
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
body {
margin:1;
font:$bodyfont;
background:$bgcolor;
color:$textcolor;
}
These would be followed by following lines of code:
a:hover {
color:$titlecolor;
text-decoration:underline;
}

Replace or change these lines to:
a:hover {
color:$titlecolor;
text-decoration:underline overline;
font-size:20px;
}
That’s the simple code for my blog to great effect.

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.

5 comments:

  1. thanks, i try this on after i write this comment, i'll update u!

    ReplyDelete
  2. i can't do it!

    (btw, my readers are going into your blog, because they think your blog is connected with that $candal. haha)

    ReplyDelete
  3. Julia,
    I 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. :)

    ReplyDelete
  4. i already do it!
    but 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! =)

    ReplyDelete

I always like to hear back :)
However, irrelevant comments and irrelevant links will not be published. Needless to say, same goes for abusive comment and spam. Leaving back links related to the topic is encouraged. I know it can be tempting but try not to leave your email ids, phone nos and CVs in the comment.

Creative Commons License This work is licensed under Creative Commons Attribution-Share Alike 3.0 License. If you choose to use this or any part of this post on your site please link back to this page.

Categories

100 years of Indian Cinema (36) 1857 (1) 1930s (1) 1947 (20) 1947 print Ads (2) 1950s (1) 1982 (1) 1983 (1) 30s print Ads (1) 40s print Ads (6) 60s print Ads (3) 70s print Ads (52) 80s print Ads (24) A Diary Stolen (9) Ads from 90s n Y2Ks (12) Agra (9) Aldous Huxley (5) Allama Iqbal (3) Anna Akhmatova (3) art (2) Articles (25) Bagpipes (2) Bat-Ball (6) Begam Para (1) Blogging (34) Bookmarks (56) C 4 Computer (7) cartoons (2) Censorship (17) chori (1) Classic Indian Studio (5) Collage (35) Comics (20) Dev Anand (2) Dilli (25) Doordarshan Days (29) Eye Candy (69) Frivolous lol (32) game development (1) Gandhi (13) German Advertising Art (2) gurgaon (5) Guru Dutt (7) Hindi Chini (6) History (68) Hoarding (168) Indian Cinema (125) Indian Retro Television Ads (8) Indira (9) indo-pak (5) it is the 50s (1) it is the 60s (6) it is the 70s (19) it is the 80s (18) it is the 90s (7) Jungle Book (12) Kochi (2) Madhubala (2) maps (3) mario miranda (4) Meena Kumari (8) Million Gods (33) Movies (22) Mumbai (6) mumtaz (1) Music (62) Musings (7) Mussoorie (1) Nargis (1) News That Was (8) Nostalgia (29) Outlinks (16) Pandit Nehru (15) parveen babi (4) phasion (3) Photos (98) Plain weird Query (3) Poems Verses Whatever (43) Projects (3) Quests (4) Radio Ga Ga (11) Raja Harischandra (1) rastay ka maal satay may (2) roos (1) Sari Ads (5) Selected Nonsense (53) snake fest (4) Tibet (5) tona totka (1) Trip to Kashmir (5) Tube You (63) Urdu Poets (8) Vintage Indian Print Ads (97) Walls (5) Who are these people? (14) who mashes up gods? (25) Word Talk (4) Zeenat Aman (13)