This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 27, 2007

Digg This Story

Remove Underline below Text Links

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

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

14 comments:

Tigre de Fogo said...

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?

bizwhiz said...

Hi Tigre de Fogo

I have included another paragraph in the article to address that. Thanks for raising it.

Tigre de Fogo said...

It works perfectly, thanks a lot!

You are an angel!

Abra├žos,

Tigre de Fogo

Alban, Teacher of God said...

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

bizwhiz said...

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.

Lucie Bryar said...

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

Braden said...

How do I get separaters on my sidebar like your's?

pingmouse said...

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.

Anonymous said...

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.

frenchy chu said...

this blog is such a great help for newbie bloggers like me. thanks. will be here regularly for sure.

vrtulobjeq said...

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

iicchh said...

Hm. I am using a three column Sand Dollar Template, and these your instructions do not work for it. I cannot find any "underline" in the html-Code, but still the links in the main column remain underlined.
Ok. There is more in life than the text decoration of blog links.
Oh yeah, and let me say a big thank you for all the help and inspiration you bring to us in your blog!

Starhash said...

dear sir, i like the template you used for http://tricks-for-new-bloggers.blogspot.com/. will you give it me to use in my blog please? my email id is Withkarul@gmail.com. thanks for help

yuppicide said...

I followed your instructions to remove underlines for links in Sidebar. I cannot figure where to put code to make underlines show in posts. I've tried a few different areas, none work. They all showed up with no underline and one time it messed up my template a little so I took it out.