How To Change Specific Link Color In Blogger GOPI SAHI

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

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