Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, October 7, 2012

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

245 comments:

  1. listen heres how my code look like







    can you help me understand which value do I have to change for the color to take affect and what does the other value do

    http://ptetech.blogspot.com

    ReplyDelete
  2. what i want is that my post title should stay black and hover color should be green while rest of the links on page should be green and hover color should be black for them. I hope you come up with a fix

    I am realy thankful to you!!!!!

    ReplyDelete
    Replies
    1. Try this:

      a:link{
      color: #008E00 !important;
      }
      a:hover{
      color: black !important;
      }
      .post-title a{
      color: black !important;
      }
      .post-title a:hover{
      color: #008E00 !important;
      }


      Cheers.

      Delete
    2. it worked perfectly but however it is showing visited colors as dark blue. Is it possible that I can keep the visited links color unchanged

      Delete
    3. i think i just did it with an extra code

      a:visited {
      text-decoration:none;
      color: #000000;
      }

      it was beautiful experience thanks for your help!

      Delete
  3. Any way to get links to display underlined in Dynamic Views?

    ReplyDelete
    Replies
    1. Yeap.. Add this to your CSS:

      a:link{
      text-decoration: underline !important;
      }

      Cheers Bob :)

      Delete
    2. The post title is a link. Wonder if I can exclude it from being underlined? Thanks!

      Delete
    3. Actually, I only want to underline links that appear in posts. Is that possible? Thanks again!

      Delete
    4. Right.. Remove the previous code. Now, need a little clarification. By posts, were you referring to post pages, or summaries in magazine and timeslide as well?

      Sorry for the late reply btw. I was outstation :)

      Delete
    5. Just the actual post pages. Thanks!

      Delete
    6. Just the links in the actual text in each post but not the title. Thanks again!

      Delete
    7. Sorry for the late reply Bob. Try this instead:

      .entry-content a, .overview-content a{
      text-decoration: underline !important;
      }

      Cheers :)

      Delete
  4. The comment link for the dynamic views? :)

    Thanks!

    ReplyDelete
    Replies
    1. Use this:

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

      Visited link color wont change on some dynamic links. Cheers :)

      Delete
    2. Worked perfectly!

      Thanks again Mr Yoga!

      Delete
  5. i want my grey sidebars to be equal to the sides of my tabs bars showing buttons of home, blogging, downloads etc.

    kindly share any tweak for that

    ReplyDelete
    Replies
    1. Which grey sidebars? Mind sending me an annotated screenshot?

      Delete
  6. how can i removed powered by blogger in my blog footer and is it ok if do that? Does blogger has any penalty schemes for that?????

    ReplyDelete
    Replies
    1. No you won't be violating Blogger's TOS if you remove the attributes. That said, where exactly is yout 'Powered by Blogger'? Having a hard time finding it.

      Delete
  7. hi yoga

    Is there any fix that will make comments visible on static pages with the dynamic views?

    ReplyDelete
  8. Wondering if there is a way to change quoted text (i.e. blockquote in html) in CSS so that it always appears italicized? Thanks!

    ReplyDelete
    Replies
    1. Hi Bob,

      Are you referring to a normal template or a dynamic view template? Would appreciate an example if you have any :)

      Cheers..

      Delete
    2. Dynamic View template. You can check out http://www.kansasbob.com/2012/08/yes-john-stewart-we-built-it.html where you will see that the block-quoted indented text (starting with "Tuesday night's speeches") is not italicized. Thanks again!

      Delete
    3. Try this Bob:

      blockquote{
      font-style: italic;
      }

      Cheers :)

      Delete
    4. Hi Yoga,

      Is there a way to make parts of blog posts' headlines in italics?

      I use a normal, non-dynamic template. Here's my blog, just in case - www.writeregion.com

      Delete
    5. Hi Farhan,

      It will be too tricky to be pulled off, unfortunately..

      Delete
  9. The links to my pages (underneath the heading) are a grey color and when I hover over them they are black and underlined. I would like them to be black and then grey and underlined when hover. Also to say black when visited. This is for a dynamic view template. Would love some help with this!

    ReplyDelete
    Replies
    1. Hi Melanie,

      What's your blog's address? I'm gonna have to inspect your current setting to suggest a working solution.

      Delete
  10. Hi! You are so great to help everyone out. I actually am trying to figure out how to change my gadget font and color. I was able to change my date header via HTML and also the tabs. But I guess the gadgets are separate from the tabs and links.

    so on my blog - www.madeoutofrealthings.com
    I have a few gadgets right now (grab my button) (follow me) etc. I would like to change the color and font of those.


    I would appreciate the help if you know how to do this! Thank you!!

    Nicole

    ReplyDelete
    Replies
    1. Hi Nicole,

      Yeap, can be easily done with a few steps. I couldn't write a possible fix yet as it largely depends on the font that you wanna use. Different font -> different code. What font and color do you wanna use? And do you wanna change the whole of your sidebar's text or just the title and such?

      Cheers :)

      Delete
  11. i want to change credit link color in footer. please help

    ReplyDelete
    Replies
    1. Let's have a look at your blog. What's your blog's address?

      Delete
  12. How can i change color of label links at the bottom of post in dynamic views?

    ReplyDelete
    Replies
    1. Hi Amit,

      What color you wanna change it into?

      Delete
  13. Hi! My Blogger dashboard won't cooperate. I've set all my links to be pink (#ea9999 to be exact) in the Customize menu but nothing happened. I had to add your Archive code to change that gadget to pink from blue. I've even gone in and edited my template (that helped post titles and links inside the post to change to pink) but the labels links and other links in my left sidebar are stubborn and remain blue. Help!!!

    ReplyDelete
    Replies
    1. Hi Lisette,

      I looked into your blog's source, and the first thing I noticed is that your codes are repeating itself, like hundreds of time. Could you get them fixed first, before we proceed with our next course of action (regarding your link color). Find any duplicate code in your CSS, and just keep one copy of them, and delete the rest. Let me know if you need help with this.

      Cheers..

      Delete
  14. Thanks Yoga! Label links color code is working! I did not put in 'Add CSS' but directly in the HTML page. Thanks again! :)

    ReplyDelete
  15. Hi Yoga and thank you for all the awesome tutorials you have posted! So far every single one has worked without any problems, except this one :(
    I put the following code to by blog, but the colour of my links doesn't change.

    .post-body a{
    color: #f83ee2 !important;
    }
    .post-body a:hover{
    color: #f83ee2 !important;
    }
    .post-body a:visited{
    color: #f83ee2 !important;
    }

    I AM able to change the colour of all links on my blog (post title, widgets...)but that's not what I'm looking for, I just want to change the color of links within the post body. What am I doing wrong? I would really appreciate if you have time to check the situation. You can find the address of my new blog from my profile( I don't want it to be published here). Thanks a lot!

    ReplyDelete
    Replies
    1. Hi Kata,

      There isn't anything wrong with your code. In fact, when I tried to inject this code directly to your blog page (using some developer's tool), your links did change to a pinkish/purplish color. Now, the reason it isn't working for you is because the custom code that you've added to your blog is all jumbled up, and for some strange reason, it has been repeating itself. Go to your 'Add CSS' box and get this fixed. Delete all duplicate codes. There might also be some characters that should be there, which is making your newer CSS code useless.. But it's just too difficult to look for it now with all the duplicate code.. Get it cleared and get back to me.

      Cheers :)

      Delete
  16. Hi Yoga! I went to Template editor --> Add CSS, but there was nothing in the box. Should all the CSS codes I have added be visible in that box?
    However, I went to see the actual HTML code instead and I did found a LOT of duplicate codes! I manually went through the whole code and deleted all duplicate codes... And it really worked! Links are now exactly the colour I want them to be. Thank you SO much for your help!

    ReplyDelete
    Replies
    1. Hi Kata,

      The 'Add CSS' box is just a temporary holding space for your CSS codes.. Whatever code you've inserted there will be visible as long as the Edit HTML box is not launched. The actual code is stored in the Edit HTML box (and I usually suggest the Add CSS box as most people are a little uncomfortable with HTML).. Anyways, fixing the code in Add CSS and fixing it in Edit HTML are the same thing, and kudos to you for getting it sorted! :)

      Delete
  17. Hi Yoga,

    Sorry to bother you again, but now I have a new problem. When I'm wiewing my blog with Google Chrome or IE, the pages widget is just fine (in the center of the page and all in the one line). When I'm using Mozilla Firefox instead, the pages widget is align to right side of the page and the tabs are divided to two separate lines (five tabs on the first line and two of them on the second line). I have tested this with two different computers with different resolutions and I have now idea, how I could fix this. Could you help me with this also? (I have posted two screen shot -pictures to my blog, so that you can see the problem.)Thanks!

    ReplyDelete
    Replies
    1. Hi Kata,

      This should fix it. Add the following to your 'Add CSS' box:

      .widget-content ul{
      border: 1px solid transparent !important;
      }


      Cheers :)

      Delete
  18. Hi,
    I added

    .widget-content ul{
    border: 1px solid transparent !important;
    }

    to the code, but it's not doing anything :( Do you have any other suggestions?

    ReplyDelete
    Replies
    1. Hi Kata,

      Try this:

      .widget-content ul{
      clear: both !important;
      }


      Also, there's a code with double ending brackets }} in your code. Get it fixed.

      Cheers :)

      Delete
  19. Hi Yoga,

    That second code worked perfectly, thank you so much for your help! :)

    ReplyDelete
  20. Hi Yoga,

    Thanks for the great tutorials. If you don't mind, could you help me change the link color on my post header and my tab links to black?

    Thank you!

    http://trollhoer.blogspot.com

    ReplyDelete
    Replies
    1. Hi Dennis,

      Try this:

      #HTML1 a,.post .post-title a{
      color: black !important;
      }

      Cheers :)

      Delete
  21. Hello Yoga,
    is there any way to remove the underline from the header text in dynamic views. I have tried adding a:link{
    text-decoration: underline !important;
    }
    to the CSS box, but nothing happened. Here is a link to the page I am building so you can see what I'm talking about: http://andreloftis.blogspot.com.
    It's very frustrating having that underline appear over my logo.
    Any advice would be appreciated, thank you very much.

    ReplyDelete
    Replies
    1. Hi Andre,

      Sorry for the late reply. Try this:

      .header-bar .title a:link, .header-bar .title a:hover{
      text-decoration: none !important;
      }

      Cheers :)

      Delete
  22. hi..i need some help..i use classic dynamic views template and i want to know if is possible to display navigation links on full post pages becase nothing appears for navigation. The visitor can only use J or K keys to navigate, but many visitors doesn't know that. So is there a way to display some navigation links on post pages? Thank you!

    ReplyDelete
    Replies
    1. Hi trefu,

      That is a genuine concern, but unfortunately, there isn't much we can add to the structure of these templates. That is why I tend to avoid Dynamic View templates that have pop-up posts, and I like to opt for the Sidebar view instead.

      That said, you might wanna get your voice heard. Head over to Blogger Help Forum, and leave your suggestion/feedback in there.

      Cheers :)

      Delete
  23. I've applied several of these codes and I've gotten them to work! Thanks! I am having trouble (and I am sure it is here in front of my face somewhere) in my side bar under my "labels" gadget. The individual labels are gray and then once visited switch to a different color(which I like that color) How to switch the gray color out? I just want to highlight the labels a bit better than the gray does.

    ReplyDelete
  24. I figured it out, so disregard my question. For now.... till the next one comes up!
    your the best!

    ReplyDelete
    Replies
    1. Glad you got it figured Tip Garden! Sorry for my late reply btw..

      Delete
  25. Thanks Yoga :) You really did a great job ! I was having problem in these codes

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

    and probably was making a little mistake .. Thanks for your help!

    ReplyDelete
    Replies
    1. Hi there,

      color: default; is not a valid statement. What color do you want to use as default?

      Delete
  26. I am trying to change the color of my followers number. I want the text on my gadgets to be white, but if I do that the followers number won't show up. In layout, the followers gadget has an option to change to a different color text. I keep doing that but it never shows up.

    Thanks!

    ReplyDelete
    Replies
    1. Hi Megan,

      Let's have a look at your blog. What's your blog's address?

      Delete
  27. Hello!

    Thanks for this awesome tutorial.
    I'm wanting to change the text "categories" - which is to the right of my labels. You can see labels are one color and the text "categories" is a light color yellow. How do I change the color of the text "categories"?

    Thanks for your help in advance!
    All My Best,
    stephey baker

    ReplyDelete
    Replies
    1. Hi Stephey,

      Sure thing. Let's have a look at your blog. What's your blog's address?

      Delete
  28. This is certainly a great article, Thanks! However I am experiencing problem using changing the link color in blogger.An helpful post for me.

    Jogos de moto

    ReplyDelete
  29. Hi, please check www.superfoota.com. Somee links appear in blue others dont. Can you help have the links in the posts have a uniform link colour. Thank you.

    ReplyDelete
    Replies
    1. Hi Agrrey John,

      All links are appearing as blue in my browser. Could you send me a screenshot or a link to one of your posts in which the link isn't blue?

      Cheers.

      Delete
  30. Hi,
    Nice tutorial. Can you help to sort out one another problem? In my post pages, the sidebar moves into the right end of the page. It is fine in the homepage. Can you help me? Site : TechSeventy.org

    ReplyDelete
    Replies
    1. Hi Nitheesh,

      Sorry for the late reply. I've try loading your page but it's turning up blank. Is your site down or something?

      Delete
  31. Thank you very much, you're very good on css.

    ReplyDelete
  32. hi thanks for this tutorial,please i will like to change my blog description color to #800000,increase the size of my tabs and make the text bolder,then remove the background color of my date header to transparent and leave the text as bold black,its not working with my css. Thanks

    ReplyDelete
    Replies
    1. Here:

      .Header .description {
      color: #800000 !important;
      }
      .tabs-inner .widget li a{
      min-height: 30px !important;
      padding-top: 20px !important;
      font-weight: 900 !important;
      }
      .date-header span{
      background: transparent !important;
      color: black !important;
      font-weight: 900 !important;
      }

      Cheers..

      Delete
    2. Thanks a lot,it works fine now!

      Delete
  33. Hi, thank you so much for the codes - they have helped me a lot! You can't imagine how grateful I am :-). I was wondering whether you also have a code to change the colour/style of the "tags". And if it's even possible; the code to change the titles for the "Popular posts" widget. Thanks a lot! x

    ReplyDelete
    Replies
    1. Hi WY,

      This should work for the popular posts titles:

      .item-title a{
      color: red !important;
      }

      As for 'tags' colors, which ones are you referring to exactly?

      Cheers :)

      Delete
    2. Thank you so much! Err... With 'tags' I meant the widget that shows the labels of your posts and the amount you've tagged the labels with. I have one other little query, how to I change the hover type of my post titles and posts? I have managed to change the one in the sidebar, but somehow I can't get to change the ones in the body. Thank you so much! :)

      Delete
    3. We can't individually change the label's contents, but to change the generic color of the links in the gadget, use this:

      .label-size a{
      color: red !important;
      }
      .label-count{
      color: yellow !important;
      }

      About your other query, what do you mean by hover type?

      Delete
    4. Thanks! Sorry with hover type I meant the style of the link once my mouse is on it (without clicking). I've tried the link you gave in the post, but no success. It keeps underlining them and making it in all caps - which I don't want. Is there a way to remove this? Thanks :)

      Delete
    5. Right.. That.. Add the following to your CSS and you're good to go:

      .post a:hover{
      text-decoration: none !important;
      text-transform: none !important;
      }
      .post-title a:hover{
      text-transform: uppercase !important;
      }

      Cheers :)

      Delete
    6. Thanks a lot, it's all working now :) Sorry to keep bothering you, but is it possible to have different styles for the post title and the post body (as in link colors/styles)? :)

      Delete
    7. Nope, there post titles do not have unique handlers. We can't individually target them.

      Cheers.

      Delete
  34. Hiya, your codes have helped me a lot. Was wondering how I can edit the font from time/date on the comments and in the footer of the blog (as in the words: Label, written by, etc.).

    For some odd reason my links in the body get underlined once I hover over it. I've tried using your link but have no idea how to remove that link. It also gets in all caps, which I also don't want. Pls help? Thx. Cheers mate.

    ReplyDelete
    Replies
    1. Hi Dave,

      It depends on the kind of template you're using. What's your blog's address?

      Delete
    2. Hiya, I'm using the standard template on Blogger.

      Delete
    3. Hi Dave,

      If I were to suggest anything useful, I need to look at your blog and inspect your elements directly. It won't even work if you send me a screenshot of how your blog looks like, as I will not know what kind of handlers your blog is using.

      Delete
  35. Hello,

    Thanks so much for the information you provide; it has helped me immensly. There are two things I have been unable to find instructions for, if you could possibly point me in the right direction:
    1. How do I change the hover color of the page links in the header bar in dynamic view (mosaic). Currently it looks like they are displaying as a transparency of the color on normal view and as full opacity on hover. I want them to be the transparent on normal, but full opacity white on hover.

    2. Is there a way to change the font/color/size of the hover text over images?

    my site is www.houseofhaha.com

    Thanks in advance!

    Aaron

    ReplyDelete
    Replies
    1. Hi Aaron,

      1) Add this to your CSS:


      #header .tabs li .menu-item:hover, #header .menu li .menu-item:hover, #header .tabs li .menu-item.current{
      color: white !important;
      }

      2) We might be to pull it off, although the font part could be a little tricky. It'll be easier for me to suggest a particular answer rather than going on a generic note. What font/color/size are we talking about here?

      Delete
  36. Hi! Thank you soo much for this its helped so much! what im looking for still though it how to change the link colors of my popular posts gadget and the "Posted by Pampered With Polish" link as well as the "Subscribe to: Post Comments (Atom)"

    here is the link to a post of mine where you can see how these three stick out
    http://www.pamperedwithpolish.com/2013/03/suzis-hungary-again.html

    thanks!!

    ReplyDelete
    Replies
    1. Hi there,

      Sorry for the late reply.

      1) You can change the "Posted by.." link color using the following:

      .fn a{
      color: red !important;
      }

      2) I can't find your popular post gadget. Where exactly is it again?

      3) Try this for the "Subscribe to:" link color:

      .feed-links a.feed-link{
      color: red !important;
      }

      Cheers.

      Delete
    2. thanks! and i chose to take it out haha but one more thing i just discovered, is it possible to get my disqus to change with the rest of my fonts too? thanks SOOOO much!

      Delete
    3. I haven't had any experience working with Disqus comments before, but, it doesn't look possible from Blogger's end since it is wrapped in an iframe element. See if you can modify the design from Disqus' end before integrating the code to your template.

      Delete
  37. this was a huge help! thanks!!! :)

    ReplyDelete
  38. Hello! First let me say that I've come across your site a few different times when trying to find help with my blog. So, thank you! Your suggestions always work.

    I'm trying to change the font size and style on one of my static pages. The comment section where it says, 'No Comments" and "Post a Comment" are huge and ugly. :-) Is there a way to change that??? I'm very new at this starting a blog thing so bear with me....I'm still learning. :-) Thanks so much!

    www.laughingmywaytoconfession.blogspot.com The static page I'm referring to is "recipes"

    ReplyDelete
    Replies
    1. Hi there,

      Here, this should do it. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #comment-post-message, .comments h4{
      font-size: 60% !important;
      }

      Delete
    2. Hi! Thanks for your reply.....I just tried it and unfortunately, it didn't work.

      Anything else you can suggest? I really appreciate your help!!

      Delete
    3. It should work, as I tested the code before giving it to you. Anyways, I don't see the code anywhere in your source. Have you gotten it removed?

      Delete
  39. Hello, I have a simple template that has been modified before (not by me) and now that I want the link color to be in other color than black I can't change it. When I mean link color I mean those in the text and the affiliate links.
    Can you please help me?
    Thanks,

    ReplyDelete
    Replies
    1. Hi there,

      Have you tried using the template designer to change your link? In any case, what color would you like it to be?

      Delete
  40. Hi (: I would like to change my Header to white and remove the link. It is white without a link on my homepage but is red with a link on any other page. My blog is simplyradzz.blogspot.com if you need a visual example. Thanks!

    ReplyDelete
    Replies
    1. Hi Radzz,

      I don't see the red part. Do you have a direct link I can look at, or a screenshot maybe?

      Delete
  41. Hi ^-^ I'd like to change the color of the "sing out" link and the "subscribe by mail" in the comment box. I'm using a Dynamic Views template. Thnks! :3

    ReplyDelete
    Replies
    1. Hi there,

      I need to have a look at your blog. What's your blog's address?

      Cheers :)

      Delete
  42. Hi Yoga!
    First of all, love your site :) tons of helpful stuff you've got here :)

    I tried to change the link colours in my posts (meaning the posts' body), but I've no idea what I'm doing wrong that nothing happens :/ I tried inserting the below to my Add CSS box:

    .post-body a{
    color: 437c5a !important;
    }
    .post-body a:hover{
    color: 80af93 !important;
    }
    .post-body a:visited{
    color: 80af93 !important;
    }

    The colours should be dark teal vs. light teal but I still have the latte-ish... am I missing sth?

    Oh, my blog is: sweetcorner8.blogspot.com, using the Simple template.

    I'd appreciate any suggestions.

    Cheers!

    ReplyDelete
    Replies
    1. Hi MrsCake,

      The code above will change the color of the text-links in your post's content, meaning everything after your post's title all the way to your Linkwithin gadget. I've seen your first few posts and I can't seem to find any posts that have links within your body. Could you point me to a post that has links within the content itself?

      Or were you trying to include your post-title and post-footer into the color equation as well? Let me know.

      Cheers!

      Delete
    2. Hi Yoga!

      OK, how about here: http://sweetcorner8.blogspot.com/2013/08/smores-usa.html

      in the introduction there are 3 links:
      - marshallow pops: http://sweetcorner8.blogspot.com/2013/04/marshmallow-pops-pianki-na-patyku.html
      - gorącej czekoladzie (meaning 'hot chocolate'): http://sweetcorner8.blogspot.com/2013/01/wyborna-goraca-czekolada.html
      - s'mores cupcakes: http://sweetcorner8.blogspot.com/2013/01/wyborna-goraca-czekolada.html

      /I suspect it's kinda weird and difficult to find since my blog is in Polish ;/ + the current colour of tle links is almost the same as the rest of the text.../

      Now, what I'd like is to change the colour of the text-links in the post's content, exactly as you said. Not the post title, not the post-footer.

      Any ideas what am I doing wrong?

      Thanks

      Delete
    3. Right.. Here, this should do:

      .post-body a, .post-body div a{
      color: #437c5a !important;
      }
      .post-body a:hover, .post-body div a:hover{
      color: #80af93 !important;
      }
      .post-body a:visited, .post-body div a:visited{
      color: #80af93 !important;
      }

      Cheers and God bless :)

      Delete
    4. Perfect!!!!! :) :) :) Thank you! :)

      Delete
  43. Hi, in the pages bar underneath my blog header, the first link is YHMB - i want this to be a different colour to all of the different headers in that bar? Can that be done?

    www.youhadmebeauty.blogspot.com

    Thanks,

    ReplyDelete
    Replies
    1. Yeap, add this to your 'Add CSS' box:

      #PageList1 .widget-content ul li:nth-child(1) a{
      color: blue !important;
      }

      Cheers :)

      Delete
  44. Hi there,

    1.) How can I change just the word "Home" on my headers bar white and make it a tad bigger.
    2.) I only have Classic and Magazine views available. When I click on my classic view, the pictures are perfectly aligned, but when I click into magazine view, and click into a post, the pictures are unaligned. Any way to have all alignment match that of Classic view.

    My blog: studiesinstyle.com

    Thank you!

    ReplyDelete
    Replies
    1. Hi Jen,

      1) To change the word 'Home', go to Dashboard - Pages - click 'Edit' on 'Home'.

      1.5) To make it bigger, add the following to your 'Add CSS' box under Template Designer - Advanced.

      .menu-item{
      font-size: 20px !important;
      }

      2) You need to maximize your post's width if you want your magazine view to look anything like your Classic view. This might help:

      http://www.southernspeakers.net/2012/02/maximize-post-width-in-blogger-dynamic.html

      Cheers!

      Delete
  45. Hi, I just started following your blog. It has helped me so much! I really appreciate it. All the codes worked except, for some reason when I add the CSS for the Timestamp link, it changes the font color, but not the underline. Any suggestions of how I can fix this? My blog is: http://mysweetsalivation.blogspot.ca/. Thank you!!

    ReplyDelete
    Replies
    1. Hi Stephanie,

      Sorry for the late reply. Here, this should do it. Add it to your blog.

      .post-timestamp a:hover{
      color: #e563a7 !important;
      }

      Cheers :)

      Delete
    2. Hi again Yoga,

      I started adding "Location" under my labels. Do you know how I could change the color of those links?

      Thanks again!

      Delete
    3. And, I'm not sure if you've answered it yet, but how do you change the color of the "Read more" link?

      Delete
    4. Hi Stephanie,

      Sorry for the late reply. See if this changes your location link color:

      .post-location a{
      color: #e563a7 !important;
      }

      As for the Read More link, this should do:

      .jump-link a{
      color: #e563a7 !important;
      }

      Cheers! :D

      Delete
  46. Hi Yoga,

    I used your code to change the timestamp and it worked perfectly. However, I used the Comment link tag and it doesn't work. I've also tried changing the color of the Posted By link with no luck. I'd greatly appreciate it if you could point me in the right direction.

    Thank you

    ReplyDelete
    Replies
    1. Hi Anon,

      And I'm gonna have to look at your blog to suggest a code that could work. What's your blog's address?

      Delete
    2. I finally figured those codes out. However, I can't figure out the codes for the links (timestamp, post a comment and author) in the Pages comment section.

      My blog address is http://timmee-army.blogspot.com/

      I'd greatly appreciate any help you can give me.

      Anon

      Delete
    3. Hi Anon,

      Give this a try:

      .post-footer a, abbr{
      color: orange !important;
      }

      Cheers :)

      Delete
    4. That didn't work. :-(

      Delete
    5. Could you leave the code in your template and get back to me, so that I can inspect it live on your blog why it isn't working?

      Delete
    6. I'm probably not making myself clear. Sorry about that.
      What I'm trying to do is change the link colors on the Pages.
      Follow the link below and scroll to the bottom.
      There you will see these links that I'm referring to:

      Bunkermeister
      January 17, 2013 at 5:39 PM
      Post a Comment

      http://timmee-army.blogspot.com/p/60mm-soldiers-series-ii.html


      Anom

      Delete
    7. Right.. Here, give this a try:

      .comment-author a, .comment-timestamp a, .comment-footer a{
      color: orange !important;
      }

      Cheers :)

      Delete
  47. Hey mate my site is www.tokyocheaprooms.com. I want to change the links on the top page from grey to light blue (the email address and all the links to pages under "Rooms Available NOW!!!"). I cant do it through templates because it wont save the changes... :( Can you help?

    ReplyDelete
    Replies
    1. Hi Sam,

      Try this. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .sidebar a, #Text1 div a span{
      color: #72d2ff !important;
      }

      Delete
    2. Worked perfectly, thanks a lot!!!

      Delete
  48. Hi! My site is www.chicstylebysage.com and I want to center my tabs bar at the top, change the font, and not have a border around. I've tried adding multiple CSS codes in the advanced section of the template but none of them are making changes. Not even the text color for the body of my post. I am just using the 'simple' blogger template. Can you help?

    ReplyDelete
  49. Also..I tried to move my post date underneath my post title in HTML and now it has dissappeared? Do you know how to fix this as well? Sorry for all of the questions!

    ReplyDelete
    Replies
    1. Hi Sage,

      Sorry for the late reply. I was busy with Google's TC Summit. Anyways, I think it is best if we could move this discussion to the Help Forum, as the comment system is not equipped to cater discussions of this sort. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
  50. Hi there,
    Your codes are really helpful! Wondering if you could help me figure out that Categories issue that some others have had..the links that show up when we add labels to posts. Also, I can't seem to get the "Leave a Comment" box to change to green either. This is my website: www.feedyourmusicsoul.blogspot.com

    Oh, do you know how to get that large white embedded comment box to be transparent or maybe a color that matches my background better? Just curious.

    Thanks so much!

    ReplyDelete
    Replies
    1. Hi there,

      Can we bring these discussions to the forum? It'll be easier for me to help your there. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
  51. I wanted to thank you very much! I was looking for a way to make the links on posts only to be underlined, and then I found it here on your site! How grateful I am!

    Well, I have a question and it's kind of off topic. I was wondering if you knew how to make drop-down archive on blogger wider? I've been searching all over internet but haven't found a solution. I hope you can help me!

    Again, thank you so much!

    ReplyDelete
    Replies
    1. Hi MadineLover,

      Thanks! And yes, I think I can be of help to maker your drop-down archive wider. Give this a try (by adding it into your 'Add CSS' box) and let me know if this is what you were looking for:

      #BlogArchive1_ArchiveMenu{
      width: 230px !important;
      }

      Cheers :)

      Delete
    2. Hello Yoga,

      Oh my God! Yes, yes, this is what exactly I'm looking for.
      And it worked wonderfully!

      Thank you, thank you SO much! :D

      Delete
  52. how about the color of the text in the about me section?

    ReplyDelete
    Replies
    1. Your 'About Me' section is made of HTML gadget, so this should work for you:

      #HTML1 .widget-content{
      color: white !important;
      }

      Delete
  53. I cannot get my post links within the body to change on my blog (http://talesoftwohills.blogspot.com).

    Here is the code I have used:
    .post-body a{
    color: d6b224 !important;
    }
    .post-body a:hover{
    color: bc9282 !important;
    }
    .post-body a:visited{
    color: 9b7382 !important;
    }

    Can you offer any suggestions??

    ReplyDelete
    Replies
    1. Hi Astleigh,

      Hex color code needs the hash tag in front of them to be recognised. Try these lines instead:

      .post-body a{
      color: #d6b224 !important;
      }
      .post-body a:hover{
      color: #bc9282 !important;
      }
      .post-body a:visited{
      color: #9b7382 !important;
      }

      Delete
  54. Hi. I have a question on my site the Older Posts and Newer Posts buttons arent showing I've tried changing the color but it changes it but only when you press on it. how can I have them show? Thanks

    http://supermomtested.blogspot.com/

    ReplyDelete
    Replies
    1. Hi there,

      Add the following to your CSS, this should work. Note that you won't see the New Page link on your very first page, that's normal.

      #blog-pager-older-link a, #blog-pager-newer-link a{
      color: red !important;
      }

      Delete
  55. Hey Yoga. need some help changing a color.

    It's kind of a school bus yellow background on the top row of labels on my blog: http://ent-weekly.blogspot.com/

    I'll point it out here:

    [url=http://www.webpagescreenshot.info/img/52fd55ad782c12-95873314][img]http://www.webpagescreenshot.info/i3/52fd55ad782c12-95873314[/img][/url]
    Taken with [url=http://www.webpagescreenshot.info]Webpage Screenshot[/url]

    ReplyDelete
    Replies
    1. Hey Brandon,

      I can't view the screenshot. Have you got this sorted?

      Delete
  56. Dear,
    Can we customize the link color while writing a comment in other blogs? if it is possible please give the code. postbankofindia.blogspot.in

    ReplyDelete
    Replies
    1. Unfortunately not. Only the blog owner has the control to choose how comments (left by others) are shown on his/her blog.

      Delete
  57. hi i was wondering how can i change the colour of my flipcards frame , it looks white on my blogspot and i want to change it to black http://astralforest.blogspot.com/

    ReplyDelete
    Replies
    1. Made a pose to answer your question:
      http://www.southernspeakers.net/2014/05/changing-flipcard-border-color-in.html

      Delete
  58. Hi,

    How change all link color (red) in all my post? I want a blue color.

    This is my blog:

    http://www.programegratuitepc.com/

    Help, please!

    ReplyDelete
    Replies
    1. Sorry for the late reply. I see blue links in your blog now. Have you got this sorted?

      Delete
  59. I just wanted to say thank you! This isn't even the first of your posts that's helped me make custom adjustments to my Blogger's CSS. You're a lifesaver (blogsaver?!). Thanks again!

    ReplyDelete
    Replies
    1. Thanks Kristyn, glad I could be of help :)

      Delete
  60. Hi There,
    First, all of your tutorials have helped me cuztomize my blog, so thank you! I was hoping you can tell how I can customize the "read more" text for a jump break in blogger. I know how to change the actual wording, but I would like to BOLD the text so it stands out. My blog is www.casualglamorous.com. There must be an easy way to do this, but I can't figure it out! Thanks in advance!

    ReplyDelete
    Replies
    1. Hello Audrey,

      It is as simple as adding font-weight to the 'read-more' class. BUT, it looks like the read-more in your template does not have a class defined. Either you're adding the 'read more' differently, or you've removed the class from your template - we wont be able to customize the text until you insert a class for the jump break. Mind if I have a look at your template code (paste it in pastebin.com)?

      Delete
    2. So sorry for my late reply, I was out of town! I'm not sure what you mean by class (sorry, I'm kinda clueless!). All I did was change the wording from "continue reading" to "read more" in the layout/blog posts section in blogger. Do you still need me to post the template code? Thanks again!!

      Delete
    3. Strange.. Yeah we have to dive into the code to fix this, I need to have a look at your template..

      Delete
  61. Hi Yoga,
    I wanted to change the link colour inside the blog post only.It works but it also changes colour of NRelate widget.How do I counter this problem?
    Thanks a ton :)

    ReplyDelete
    Replies
    1. Hello Priyanka,

      Let's have a look at your blog. What's your blog's URL?

      Delete
  62. something difficult.... How to make a link color in navbar to stay active when you are in this page? is it possible or not? am talking about blogger templates.

    ReplyDelete
    Replies
    1. Hello Akis,

      Theoretically, a link will change to visited link color once clicked. But you can make the visited and active links the same color. That's the only way I could think of/

      Delete
  63. Hi. I have successfully implemented your number 7 for links within the post's body. Default link color is blue, but I would like a single link in the post to appear in red. How can I do this? Simply coloring this individual link in red does not work, the command is overriden by default blue. Thanks in advance.

    ReplyDelete
    Replies
    1. There's a small chance to pull this off, but it depends on the kind of template you're using. Mind if I take a look at your template?

      Delete
  64. Sure. I use the Simple template at http://www.eurocanadian.ca/ . The link in question is the author name (currently Duchesne), which I would like to appear in the color of the title.

    By the way, do you have any idea why there is a gap between my tabs and the header image? It appeared after I downsized the picture, but I cannot identify the source of the problem. Presumably padding or margin, but of what parameter? Again thanks.

    ReplyDelete
    Replies
    1. Let's handle one thing at a time. This could go for a length, do you mind if we take this to the Blogger Help Forum? It'll be easier for me to post HTML codes there.

      http://www.southernspeakers.net/p/ask-question.html

      Delete
  65. Hey Yogi, Need CSS code for my blog posts where the link is just showing as underlined and black colour, i want it to be just an blue with underline (like hyperlink) do check my blog for this error htt://citizen-reviews.blogspot.in

    ReplyDelete
    Replies
    1. Add this to your 'Add CSS' box:

      .post-title.entry-title a{
      color: blue !important;
      }

      Delete
  66. Hello, I am having a little trouble with link hover color in my blog and was hoping you could offer some advice! I am using blogger and have added the HTML/Javascript gadget to add in my navigation links. I would like to add link hover color to the links here that is different from the link hover color in the template (or the links in posts, etc.) I seemed to have tried everything and can't seem to get this to work.

    Thank you so much!

    ReplyDelete
    Replies
    1. Understood. What color would you like to use?

      Delete
  67. I would like the text to be black and hover color to be #c1ae70

    ReplyDelete
    Replies
    1. Hello Kristen,

      Sorry for the late reply. Looks like you've already got this sorted?

      Delete
    2. Yes I finally figured it out! Thank you for your time and help!

      Delete
  68. Is there a way to make all links in post bold?

    ReplyDelete
    Replies
    1. Yeap, add this to your CSS:

      .post-body.entry-content a{
      font-weight: bold !important;
      }

      Delete
  69. Hi Yoga, Has anyone else ever mentioned to you about the jiggly sidebar gadget. I actually makes me dizzy when I have your site open. I have a piece of dark paper that I put over the screen on that part so I can read without distraction. I'm just curious if anyone has ever mentioned it.

    ReplyDelete
    Replies
    1. Hello Geri,

      Thanks for letting me know, I wasn't aware of this. I'm trying to recreate what you're seeing but without much luck. Could you also advise me what browser you're using so that I can see what you're seeing? Very much appreciated, thanks!

      Delete
  70. Hello! My question is slightly different from this tutorial, but I'm trying to customize the newer posts and older posts links on my blog. I actually just noticed that I don't have a newer posts link and was actually looking to add it into my template if possible. I also wanted to know what the CSS would be to have my links like this:
    http://lacelouboutinsandleather.co.uk/blog (If you scroll to the end of one of her posts, you'll see her links have a square background that is black, and it seems to have a hoover effect as well.)

    My blog URL is fangirlavue.blogspot.com :)

    ReplyDelete
    Replies
    1. Hello there,

      Sorry for the late reply. I can see the newer link in your blog:
      http://fangirlavue.blogspot.jp/search?updated-max=2014-12-08T14:12:00-05:00&max-results=7

      As for the border, this should do it:
      #blog-pager{
      overflow: visible !important;
      }
      #blog-pager-older-link, #blog-pager-newer-link{
      border: 1px solid grey !important;
      }

      I cant quite see the hover effect in the website you've given.

      Delete
    2. Thank you! I'm going to try this code in CSS as soon as possible. In the website given she actually changed her layout, so the hover effect I was looking to accomplish is no longer there lol. I have no clue how to even describe it, but on the older posts link, the hover effect's background was black but the entire link was rectangular. Sorry if that doesn't make any sense! lol

      Delete
    3. I took another look at her website, and she still has the rectangular border I'm looking for, for her newer and older links, just not the hover effect. That's a bit different.

      Delete
    4. Hello Martika,

      The code above should give the border. Let's figure out the hover effect once the border is settled.

      Delete
  71. Okay thanks again Yoga! I'll be trying the code out later on today, I'll notify you when I've added it my site :)

    ReplyDelete
  72. Hey Yoga, I tried the CSS code you gave me above, but it's not working. I also remember going to my blog yesterday and seeing the New Post link, but today it's no longer there.

    ReplyDelete
    Replies
    1. Some of your existing CSS code is broken - and that prevent the newer code from having any effect. This particular one to be exact (this is already in your template, look for them).

      #blog-pager-older-link,
      .home-link {
      font-family: 'Happy Monkey', cursive;
      text-transform: uppercase;

      You can either delete these lines or add an closing curly bracket } to the end of the line (after uppercase;) to fix this.

      As for your New Post Link, it is still there. You wont be able to see them on your main page because, well, there is no newer posts than the ones in your main page now are there? You'll see them when you click on Older Posts.

      Delete
  73. Hi Yoga:

    I want to change link colors in this section ONLY - Tin & Bài mới (Latest News) - (normal, visited, hover and active) to:

    Normal: navy
    Visited: green
    Hover: orange
    Active: maroon

    http://khaidantri.blogspot.com/

    Thanks in advance for your help!

    Cayson

    ReplyDelete
    Replies
    1. Hello Cayson,

      Sorry for the late reply. This should get you to your CSS goals:

      #HTML8 span a:link{
      color: navy !important;
      }
      #HTML8 span a:visited{
      color: green !important;
      }
      #HTML8 span a:hover{
      color: orange !important;
      }
      #HTML8 span a:active{
      color: maroon !important;
      }

      Delete
    2. Hi Yoga:

      I understand your plate is always full. Thanks for the response.

      The CSS codes worked like a charm.

      Thanks a bunch.

      Delete
  74. Hi Yoga, I am so thankful for your helpful tutorial and codes, I can see you put an amazing amount of effort into helping others and I really appreciate it! I have been able to figure out most of my issues by reading comments under your tutorials and using codes you made to help others. I however have scoured the comments under this post and cant seem to find a solution for my issue:

    I dont want the title of my blog to have an underlined hover bar in the color green I don't want it to have a color at all. Just transparent I guess. How do I make the hover underline invisable?

    Thank you so much for all the help you've given me already, I appreciate it!

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.