How To Remove Link Underlines

Take a look at the links below:

Notice anything about them? They are not underlined, yet they are still active.
For a good while, people would write to me and ask how to rid the links on their page of the awful underline.Well, here's how you do it:

When you add a link in normal method your html code will look like this :
<a href="http://www.royaltutor.net/"> Royal Tutor</a>
Result:

Royal Tutor

If you want to remove underline of link, add style="text-decoration:none" as example below.
<a style="text-decoration:none" href="http://www.royaltutor.net/"> Royal Tutor</a>
Result:

Royal Tutor
that's it

3 comments so far:

Mahesh said...

Thanks I've been looking for this trick for along time!

The Pick Man said...

Quite the reverse, I would like to be able to add underline to the link as it appear on my blog before hovering so that it is obvious that the link is there. Is there a way to do it?

Admin said...

@The Pick Man

Thanks for the comment!
Login To Blogger Go To > Design > Edit HTML.
and mark the tick box "Expand Widget Templates"
Then, Scroll down to where you see this code in the template.

a:link {
text-decoration:none;
color: #ff3f3f;
}
a:visited {
text-decoration:none;
color: #952966;
}
a:hover {
text-decoration:underline;
color: #45818e;
}

Just change “none” to “underline”
after that it should look like this

a:link {
text-decoration:underline;
color: #ff3f3f;
}
a:visited {
text-decoration:underline;
color: #952966;
}
a:hover {
text-decoration:underline;
color: #45818e;
}

Now click Save and you are done.

Post a Comment

 
Royal Tutor © 2011 | Privacy Policy | Powered by Blogger | Back to top