How To Change Any Link Color In Blogger Via CSS Easily

In this post you will learn How to Change Link Color in blogger template; Post title color, footer links, sidebar links, link from post body and many other beautiful link color effects.

Interestingly in recent months bunch of creative developers and designers across the world has jumped in and has served Blogger platform with loads of freaking awesome templates. So, today for blogspot users of various niches, list of beautiful templates with multiple of different useful features are available. But still, sometime user want to make some little tweaks like to changes color schemes, background images, comments box, minor changes in layout and etc. Especially in old and default blogger templates doing modification more common. There could be any reason to change link in blogger. For example; user wants to make links more visible and stands out from text stack or, want to make design more attractive to enhance users experience and click through rate also, etc. Recommended: How To Customize About Me Author Profile Widget

How To Change HyperLink Color In Blogger Default Template

It is much easier to change hyperlink color in blogger default template 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 of 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 html code with # symbol (for example #ff0000) with name of desired color. Checkout following piece of code to make it more clear,

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

Recommended: Checkout Some Awesome Navbar Examples

How to Change Color of Specific HyperLink

In case you are interested to apply different color schemes on links of any specific regions forexample, Sidebar, any specific widget, footer links, post links, etc. you need to be little designer. The method is quite simple, you just have mention the CLASS or an ID of that specific area before writing css code for link. For example, if I need to change the colors of links of blog post body (Bloggeristan) then I need to add following lines in Add CSS box.

.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 right. Look at below screenshot for further detail.

change link color blogger blogspot

In the same way you can find the ID or Class of your footer section, sidebars, specific widgets, etc. But one thing you need to keep in mind is, You have to use  '.' to mention class and '#' symbol to specify ID. Recommended: Learn How To Customize Blogger Permalinks and SEO Friendly 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) I hope now will this post useful and have learn how to change link color in CSS too. Your feedback is Welcome as Always 🙂

Leave a Reply