In some templates, the text links are underlined. This distinguishes the hyperlinks from the normal text. If you don't like that, you can remove the underlines. You can also modify the template to have underlines only in the main posts and not in the sidebar or vice-versa. This tutorial will show you how it can be done.
As explained in our article Links – Hover and Rollover Effects, when you are at Template -> Edit HTML, the link styles are found here:-
a:link { } a:visited { } a:hover { } a:active { } |
|---|
a:link tells the browser how links should appear.
a:visited shows the style for links that have been clicked or visited.
a:hover is the link style you would see when the cursor or mouse moves over the links.
a:active defines the style to an activated element.
Remove Underlines in the entire Blog
To have all the underlines below the links removed, scroll to these lines:-
a:link { text-decoration:underline; } a:visited { text-decoration:underline; } a:hover { text-decoration:underline; } |
|---|
Change the text-decoration style to this:-
a:link { text-decoration:none; } a:visited { text-decoration:none; } a:hover { text-decoration:none; } |
|---|
Should you want to keep the underlines for visited links or hover effects, retain the underline attribute under a:visited and a:hover accordingly.
Link Underlines in Blog Posts only
The above sets the style for the entire blog. You may prefer to have underlines for the links under the Blog Posts only and not for links in the sidebars. After setting the default text-decoration to “none” as shown above, insert this other style definition just for the links in the Blog Posts:-
.post a:link { text-decoration:underline; } |
|---|
Preview the template and Save if you see the underlines below the Blog Posts links.
Note that the underlines will appear in the Blog Posts section, and that includes the Post Title and Footer links. In case you don't want that, and would like the underlines only in the Post content, you can insert this code instead:-
.post-body a:link { text-decoration:underline; } |
|---|
Link Underlines in Sidebars only
Similarly, after setting the default link style to show no underlines, to reinstate the link underlines only for the Sidebars, insert this additional style:-
.sidebar a:link { text-decoration:underline; } |
|---|
Preview and Save the template. Refresh your Blog page to see the underlines below the Sidebar links.
To add more styles like colors, font-size, background colors, borders, etc., refer to our article mentioned above or the examples given in our Hover Links and Rollover Examples article.
© Tricks for New Bloggers
11 comments:
Thank you for the explanation.
I don´t have sure if I placed the code on the right place. The links under the post body are ok, they show the underline, but the code affected the post title and the post footer.
Is there some way to avoid the underline on the post title and the post footer, but keeping the underline on the links of the post body?
Hi Tigre de Fogo
I have included another paragraph in the article to address that. Thanks for raising it.
It works perfectly, thanks a lot!
You are an angel!
Abraços,
Tigre de Fogo
For lack of other means to contact you, let me try this.
On my blog I would like to set up a text element below the post section (I have set my template that there is only one post, for good reasons). The text element should look exactly like the post element except it does not need date, headline etc. Comment feature would be nice, but is not necessary. I tried it, but I could not get it to work.
Thanks for any help.
This is my blog...
http://teachingacourseinmiracles.blogspot.com/
Contact: email on my blog
Cheers,
Alban
Hi Alban
The Template -> Page Elements -> Add a Page Element can either be "Text" or "HTML/JavaScript". There is no option to have another "Post" element, meaning to say you will not see the usual footer elements like labels and comments count.
My blogger template is Stretch Denim
I'm looking to change the text decoration style
at the appropriate part in the blog template the parts to change look different from the examples you have given
in my template they are
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
so my question is , Do I type none exactly where $linkColor;
is , I mean its one or two spaces from the colon, plus do I leave the word color there ?
Thank you
this blog is such a great help for newbie bloggers like me. thanks. will be here regularly for sure.
hi
while trying to remove underline below link I was trying to follow the post but you have mentioned 4 link style:
a:link { }
a:visited { }
a:hover { }
a:active { }
when I open my edit HTML I scroll down and just see 2 of these and not 4 ,
a:link { }
a:visited { }
and after these 2 I see:
a img {
border-width: 0;
}
I cant do anything as i dont find all 4 and I am stuck here .please help me to overcome this .
I am using Denim stretch template.
hi there, I searched in my html and all the text-decoration ahve been changed to none. yet i still get underlines on the sidebar and links. Please help . This is driving me crazy.
How do I get separaters on my sidebar like your's?
Hello,
First of all, THANK YOU so much for the wonderful information here. I just discovered this sight after weeks of frustration.
My Question: I'm desperate to remove the underlining on my sidebar links. Read the tutorial here and have searched my template extensively.
I cannot find any place in my template with "text decoration: underline; Therefore, I cannot remove the underlining. Any help would be appreciated!
My blog address is www.nhloveitorleaftit.blogspot.com
I have something to say ...