-->

How To Change Specific Link Color In Blogger

- October 26, 2017
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.

Recommended: How To Show Post Title Only On Homepage In Blogger

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.

change-specific-link-color-in-blogger-template


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

change-specific-link-color-in-blogger-template


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.

6 comments

Sumaya Manzoor said...

This could be one of the most useful blogs I have ever come across on this technology. I am a newbie to this technology. Great work admin.
SEO Training Center in Chennai
SEO Institutes in Chennai

Malar Pretty said...

Thanks for sharing this informative article.useful blog.
SEO training course
Best SEO training in chennai

Malar Pretty said...

Nice content.very useful thank you! for your creative ideas.
SEO Course in Chennai
SEO Training Institute in Chennai

The Daily Connoisseur said...

This was so helpful to me. I can't thank you enough!

Md. Alfaaz said...

Thank you so much for your feedback. Keep Visiting!

Biswajit Das said...

Nice article. It's very helpful to me. Thank you. Please check my hex to rgba.