Changing Specific Link Color in Blogger Templates

Before

After

Links are usually underlined (upon hovering) and shown in different text color, so that they are easily distinguishable from plain text. However, the Template Designer tool doesn't allow you to change specific link colors. In other words, the link color that you choose will be applied globally, to all the links in your blog. There are users who'd like some links to stand out from the rest, blog reader chowgypsy is one of them. In this tutorial, I've prepared a list of code to specifically change some of the common links that you might wanna apply different colors to.

Note: There are just too many specific links that I can think of. I've listed some of the common ones here. If you want to change a specific link color and the link that you wanna change isn't listed here, feel free to leave a comment and I'll update the post accordingly.

Instructions:

1) Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste one of the following codes --> Press enter after the last character of the last line } --> Apply to Blog.

2) If you have more than one code to add, simply add the newer code additively, preferably towards the bottom of your 'Add CSS' box - so that older code will stay at top.

3) To change the color in the code below, simply change the text 'red' to some other color like 'black', 'green', etc. If you have a specific color in mind, feel free to generate a HEX code and use it instead. For example, you can replace the text 'red' with #B0040D if you want a darkish-red color instead. I got the '#B0040D' part from the following color code generator --> Hex Color Code Generator.

4) I've included the options to change the hover link color (the link color when you hover over a link using your mouse) and the visited link color (the color of visited links) for each option below. If you'd like to use them, change the text 'default' to the color that you'd like to use.

For Non Dynamic View Templates:

1) Comment Link (The link in your post footer that leads to the comment section)

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

2) Label Links (the ones in your post footer)

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

3) Timestamp Links (Again, the ones on your post footer)

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

4) Older Posts (the link that brings you to the next page)

#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;
}

5) Newer Posts (the link that brings you to the previous page)

#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;
}

6) Home (the one in between 'Newer Posts' and 'Older Posts')

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

7) Post links (links within your post's body)

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

8) Archive gadget links

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

Please leave a comment if the link you're looking for isn't listed above.

For Dynamic View Templates:

Too many to list. Please request via the comment section below..

1) Comment Link (The link in your post footer that leads to the comment section)

.comments-header h3{
color: red !important;
}
.comments-header h3:hover{
color: default !important;
}