How To Change HyperLink Color In Blogger

t is much easy to change hyperlink color in blogger default templates because in these templates only a single color scheme is used for all links. To make changes in them go to Blogger > Template > Customise > Advance > Add CSS.

Now after that paste the following piece of code in Add CSS box.

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

And then tap on Apply to blog button to save changes.

In case you are not familiar with html color codes or facing any difficulties then you can simply replace color code (for example #ff0000) with the name of desired color. Checkout following piece of code to get an idea of what I'm saying,

a:link { color: red !important; }
a:visited { color: blue !important; }
a:hover { color: green !important; }
a:active { color: orange !important; }

How to Change Color of Specific HyperLink

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

To add hover effect you need add another line,

.post-body a:hover {
color: green !important;
}

You can get the exact Class or ID of that specific location in Chrome by doing right click. Look at below screenshot for further detail.

In the same way try to find the ID or Class of footer section, sidebars, specific widgets, etc. But one thing you should need to remember, use '.' to mention class and '#' symbol to specify ID.



For your ease here are some common Classes and ID's most commonly used in Blogger / Blogspot default templates.

.post-body (to change color of all links inside post body)
.post-title (to change post title color)
.sidebar (to change all links color within sidebar)
.footer-outer (to change all footer links color)