Thursday, 27 February 2014

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

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 within specfic sections forexample, Sidebar, any specific widget, footer links, post links, etc. then, you need to be little designer :P . The method is quite simple, you just need to mention the CLASS or an ID of that specific section before writing css code for link. For example, if I need to change the color of links only within 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 click. Look at below screenshot for further detail.

change link color blogger blogspot

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.

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)


If you still need help, In comments, along your blog url, just let me know what are you trying to achieve.
I hope this post will help you to learn how to change link color in CSS. Your feedback is Welcome as Always :)

16 comments:

  1. Fantastic tutorial, Syed.

    It works 100% and looks great.

    Many thanks,

    Daniel

    ReplyDelete
  2. This worked but only for some links, so I don' t know what the difference is.

    ReplyDelete
  3. @victoria: email me details. I will send you changes as per desire, obviously for free :)

    ReplyDelete
  4. how do i change the color of the links only, and keep another color for the post titles ??

    ReplyDelete
  5. @Jannike: Go to template > customize > advanced > add css. And then paste the following lines in the box.
    .post-body a:link {
    color: red;
    text-decoration:underline;}

    .post-body a:hover {
    color: green;
    text-decoration:none;}

    Replace red/green with your desired colors. You can also use hex color codes like, #7CBB00 for green color. (useful link for hex color codes: http://www.color-hex.com/ )

    After that click on Apply to Blog button on top right. Quite simple.

    ReplyDelete
  6. Thank you so much for this! I've spent the entire evening trying to override the CSS of the template I got from the net, and this is the only code that worked! Thanks!

    ReplyDelete
  7. great post however im a dumbass and i dont understand the 'edit html' at all but the css way is easier i want to change the color and font of the 'leave a comment' link under each post i beg you let me know the code for that, i will pay u 1st if u want but i really need someone to help me ive been trana figure it out for a month now looooool thank you my blog www.its-dominica.blogspot.co.uk have a lovely dayx xx

    ReplyDelete
  8. Thanks syed, it works... I feel very thankful to you...
    thanks again

    ReplyDelete
  9. Thank you so much! I am thrilled that I finally found someone so knowledgeable. It works perfectly!

    ReplyDelete
  10. Great tutorial! It's been very helpful. Thank you.

    ReplyDelete
  11. Thanks very muck.
    It worked perfectly

    ReplyDelete
  12. I am now able to change my link color according to your post. Thanks for posting.

    ReplyDelete
  13. thank you very much finally after too much google search i found solution for my blogger in your post

    ReplyDelete
  14. Thanks bro..it works well for me

    ReplyDelete