How To Style Links Inside Your Blog Post With CSS

0 4 minutes read

What Is The Importance Of Link Color In A Post?

As one of the SEO guides, it is advisable you have internal and external links inside your articles.

How will your visitors know there is a link to read a particular post related to the current post without saying; “you can read more by clicking here?” the answer is, merely seeing a word or words with different colors, they know it a link to another post or website.

Also when you have a download link, your visitors can easily see and click on it to download. But when it’s just an ordinary text like the rest, they won’t take note.

Apply Now: 5 Important Questions Your Website Homepage Must Answer

Apart from this aforementioned importance, it also beautifies your blog post.

Why do I Need To Add CSS Code?

I observed that some blogger templates, especially the ones made by third parties do not have this function. For example, some free templates from gooyabitemplates. E.g the template used on Crownpaste. If you are using such templates, you can style it to your favorite color or even decorate the link text.

How To Style Links inside your blog post and also make them open in a new window both in WordPress and Blogspot

With these CSS link styling codes, you can differentiate inbound and outbound links in your articles by choosing different colors for them if you want.

Outbound links are links to other websites or blogs. These are usually included in your post when there is an article similar to yours or when you use an article from a website and give the owner due credit.

What you must do about outbound links.

On Blogspot: When you add the link, make sure you tick open in new window (target=”_blank”) and tick nofollow (rel=”nofollow”) [this is necessary for seo]. you can learn more about nofollow link here.

See diagram below:

NOTE: You can only do this with the browser. Not with the blogger app.

On WordPress: When you add a link to a particular word, convert the post area to HTML format and add the target and nofollow values. Add at the end of the link.

See example: <a href=”https://assistblogger.com” target=”_blank” rel=”nofollow“>SirPhren </a> This links with blank target opens in new window.

NOTE: You can do these on WordPress app or on browser.

How To Add The CSS Code To Style Links In Your Blogspot Template

The cool thing is, you can add this code with your mobile phone or tablet. You don’t need to be on a desktop to add. Follow the steps below to add the CSS code to style links in your articles.

Apply Now: How To Centralize Post Title, Header and Widget In Blogspot

1). Login to your dashboard. When you do, locate your theme/template. Then click on it.

2). Click on customize as shown in the diagram above.

3). Click on Advance. When you do, you will see another section which may include background colors. But in some templates, it shows only the CSS. Click on the CSS.

4). Now in the space that shows in front, add any of the codes below. After adding, swipe to the left, you will see save changes at top-right-hand-corner. View the blog. If it works well, you can then return to the dashboard.

How to Add CSS Codes To WordPress Theme

1). Login to your WordPress admin dashboard and click on Appearance. From the options it will bring, select either Customize or Edit CSS as shown in the diagram.

2). After selecting either of the options in the Appearance, you should see this. Click on Additional CSS.

3). Upon clicking on Additional CSS, you will see this blank space to add your CSS codes. After adding the codes, click on publish to save your settings.