How To Change Specific Link Color In Blogger

{tocify} $title={Table of Contents}

Our blog design is the first thing which attract visitors. If our blog design is not good then visitors will not like to stay on our blog. So, to make our blog beautiful we have come with a nice post named how to change specific link color in blogger.

There are many blogger templates available and none of the template 100% fulfills our requirement. To make it according to our requirement we customize it. Changing links color in blogger is really the best way to make blog beautiful.

Why Change Links-Color In Blogger

Beautiful link color is very important for any blog. Visitors are attracted towards these links. It makes our blog beautiful and the chances of clicking on links are also increased. It also increases our pageviews and decreases our bounce rate.

How To Change Links-Color In Blogspot

1) Step 1: Copy the CSS code given below.

Step 2: Go to Dashboard --> Theme --> Customize.

Step 2. After that go to Advanced --> Add CSS. And paste the CSS code which you have copied earlier.

2) If you have more than one code to add simply add the code after the first code in Add CSS box.

3) If you want to change the color of the links simply change the red with the color you want. If you have a hex in your mind you can replace red with your hex color code. Ex - #ff9900. Use hex color code generator for help.

CSS Codes To Change Link Color

1) All Links (To Change the color of all blog links)

a:link {
color: #ff0000 !important;
}
a:visited {
color: #0000ff !important;
}
a:hover {
color: #38761d !important;
}
a:active {
color: #ff9900 !important;
}

2) Post Title Link

.post-title a {
color: #ff0000 !important;
}
.post-title a:visited {
color: #0000ff !important;
}
.post-title a:hover {
color: #38761d !important;
}
.post-title a:active {
color: #ff9900 !important;
}

3) Sidebar Links

.sidebar a {
color: #ff0000 !important;
}
.sidebar a:visited {
color: #0000ff !important;
}
.sidebar a:hover {
color: #38761d !important;
}
.sidebar a:active {
color: #ff9900 !important;
}

4) Footer Links

.footer-outer a {
color: #ff0000 !important;
}
.footer-outer a:visited {
color: #0000ff !important;
}
.footer-outer a:hover {
color: #38761d !important;
}
.footer-oute a:active {
color: #ff9900 !important;
}

Code Credit: Newfeatureblog

5) Comment Link

.comment-link {
color: red !important;
}
.comment-link:hover {
color: default !important;
}
.comment-link:visited {
color: default !important;
}

6) Label Links

.post-labels a {
color: red !important;
}
.post-labels a:hover {
color: default !important;
}
.post-labels a:visited {
color: default !important;
}

7) Timestamp Links

.published {
color: red !important;
}
.published:hover {
color: default !important;
}
.published:visited {
color: default !important;
}

8) Older Posts Link (The button which takes you to older posts)

#blog-pager-older-link a {
color: red !important;
}
#blog-pager-older-link a:hover {
color: default !important;
}
#blog-pager-older-link a:visited {
color: default !important;
}

9) Newer Posts Link (The button which takes you to newer posts)

#blog-pager-newer-link a {
color: red !important;
}
#blog-pager-newer-link a:hover {
color: default !important;
}
#blog-pager-newer-link a:visited {
color: default !important;
}

10) Home Link (The button which brings you to homepage)

.home-link {
color: red !important;
}
.home-link:hover {
color: default !important;
}
.home-link:visited {
color: default !important;
}

11) Post links (Changes Hyperlink Color)

.post-body a {
color: red !important;
}
.post-body a:hover {
color: default !important;
}
.post-body a:visited {
color: default !important;
}

12) Archive gadget links

#ArchiveList a {
color: red !important;
}
#ArchiveList a:hover {
color: default !important;
}
#ArchiveList a:visited {
color: default !important;
}

Code Credit: Southern Speakers

Conclusion

So, this was a guide to changing specific link color in blogger. And I hope you have liked the post. If you face any problem comment down and subscribe our blog.