Underline Links In Blogger Blogpost Only [4 Easy Steps]

Hi, I welcome you to another blogger blog tutorial. We shall learn how to underline links in blogger blogposts only, not entire blog. Follow the tutorial and learn how to underline links in blogger blogpost.

An underline Link in Web or blog site is a horizontal line immediately below a portion of text with a link. In our everyday experience, we underline to emphasize key sections of text, sometimes drawing an underline by hand below the printed text. But underlines have their own place in the world of digital design. 

In fact, underlined text has become one of the most common, most recognizable features of our online experience. When we see an underlined word or sentence on a web page, we immediately assume it’s a link. In this Blogger Blog Tutorial Series, I’ll explain the concept of underlining links and provide a few tips on how to use it to improve the web experience. 

Web page links are the primary means by which users navigate Web sites. If users do not notice or do not think, that links are clickable, they may not use the links. Simply put, there’s no guessing when links are presented consistently. Links are easy to find because users understand that underlined text means that it’s a link. The underlining draws their attention. When you remove the burdens for users, you prevent delays and speed access to the desired content.

Links should be underlined because when a text link is in the middle of a chunk of text (or as a headline), even if colored differently it isn’t always plainly obvious what is the link and what isn’t. Think of people who are colorblind. They could look at a website and not be able to tell the links apart from the text if the links aren’t underlined. So, from an accessibility perspective, underlining your links is a good thing. And, when taken in combination with coloring your links the right way, it takes away any doubt the user might have about what is a link and what isn’t.

Benefits Of Underlining Links In Web or Blog Sites

1. Familiarity: Underline is one of the most widely understood conventions on the web. Underlines provide a strongly perceived affordance of clickability — the vast majority of users understand that underlined text is a link.
2. Scannability: The underlined text is a great visual sign that guarantees link visibility when scanning text. As we scan pages vertically, any horizontal line will cut right through our line of sight. Underlining guides users to important information as they skim.
3. Accessibility: When color alone is used to differentiate clickable elements, some groups of users (such as color-blind people) might have problems identifying links. If you want your website to be accessible, you’ll have to add another visual cue to links, and underlining is a logical choice.

How To Make Your Links Look Like Obvious Links 

Your links should be completely obvious that they are something to be clicked on. Likewise, it should also be completely obvious that non-links are not links. Thankfully there are three easy ways to do this: 
1. Don’t underline anything that is not a link
Underlining your links is personal preference however it does make it painfully obvious that what you have underlined in a different color is a link. Don’t confuse readers by underlining anything that is not a link. It’s confusing.

2. Make your links a noticeably different color from your main text color
Use a color that stands out. I’ve seen blogs and websites where their links are the same color as the text and the only way to know it’s a link is by hovering over it. That’s bad user experience. Help your users by making them obvious. Choose one color for all of your links and only use that color for links.

3. Contrast Against the Page Background 
On a lighter background (white, light grey, etc.), use either medium to darker shades of blue or red. Those options generally give the most contrast against the light background. On a darker background (such as black, dark blue, etc.), use very, very light shades of yellows, greens, oranges, blues, grays, or white. 

Try to stay away from light reds, pinks, etc., since those can be too jarring to the eye in contrast to the background color. In either case, though, the specific choice depends on the color scheme that the designer is working with, so we need to use our judgment about what we think looks and works the best to make the links stand out. 

4. Contrast Against the Text 
Most text on websites is either black (on a white background) or white (on a black background). So if your links are already underlined and are a different color than the main text, you’ve done the job right. But when you’re picking the color of your links, please, choose a color with enough contrast so that there is a noticeable color difference between the text and the link! 

5. Link States
While we’re on the subject of links, it’s a good idea to have your links look different on hover and also after they have been visited. Hover is the way, a link looks when your mouse hovers over it. This just gives an extra indication that the link is an active link. A visited link should also have a different color so that it indicates to the user that they have already visited that link and they don’t need to click on it again. This is especially useful when you have a list of links for someone to read through. It helps them know which ones they’ve already visited.

How To Underline Links In Blogger Blogpost Only

Underlining all links including Post Titles, Pages, Categories, Blog Achieves, etc. is not advisable but if you feel like using it, kindly refer to this article: How to underline links in blogger blog.

Step 1: Go to Blogger Dashboard>>Theme

Step 2: Click on "Customise"

After clicking customise, it will take you to the customization section of your blogger blog. At the left pane, look for "Advanced". Click on the dropdown button beside it to expand it.

After expanding the dropdown arrow beside "Advanced" , you need to expand the dropdown arrow beside "Page Text"

When you expand the "Page Text" Above, it will give you many options, now scroll down the bar beside it to to the very bottom and click on "Add CSS"

 Copy and paste the below codes in the field provided 

.feed-links {display:none !important;}

.entry-content a {
    text-decoration: underline;
}

.entry-content .btn.btn-default.read-more{
  text-decoration: none;

}

See the infographic below for more information

Don't forget save your changes at the bottom right of the page

Click on the back arrow to go back to your blogger dashboard

An alternative CSS Code to the above is the one below, if the above code did not work for you, delete the first and follow the same steps above and copy and paste the below code and it should work! And also, if you're using a custom template, it is most likely that the above code may not work, in this case, follow the steps above and paste the below code, save and go back to blogger and view any of your blog post where you have inserted some links and see for yourself.

Personally, both codes worked for me, the one just above worked for me in the blogger default template that I have chosen, the below worked for me in a template that I have bought and uploaded on a different blog. The CSS code below is the best, I recommend it for you to implement it, it works in both default and custom templates!

.post-body a {
  text-decoration: underline;

}

I have tried so much to cover everything in this Blogger Blog Tutorial, How To Underline Links In Blogger Blogpost Step By Step. If you follow the tutorial strictly, I don't think you'll encounter any issues, however, if you encounter issues, comment it at the comment section below and I will attend to you! Happy blogging! And don't forget to share, thanks!