change link color in blogger or wordpress-quencible

How to change link color in Blogger or WordPress

There is no any doubt that if you have a blog, most probably you will add some articles and of course some links within those articles. Let me guess one thing that you will be bored of seeing the same and regular links again and again, and you must be wondering to customize them by changing the color of hyperlinks. So as a result, in this article, I will help you out to customize or change link color in Blogger and WordPress as well.

So before you get started, let me tell you something; I will be using some codes to do that, make a promise to me that you won’t be confused with those codes. And yes, I will unquestionably explain every step.

So let’s get started.

I will start with small piece code, and then later we will further move to customize it even more.

Whenever you create any link, it is created with the help of A Tag or Anchor Tag. Its syntax is:

It will create a default link like this: Quencible

And this is what we will be going to customize and let’s finally know:

How to change link color in Blogger or WordPress?

If you want to change link color of your site, you need to paste this code:

The code above will change link color of your given hyperlink to red. You can even turn it to other colors, make sure you are using correct hex code. #ff0000 means Red, in case you want to know hex codes of different colors, you may use our app Material Shades (this contains 14 shades of material colors, you can even compare them too.)

Now, to change link color in Blogger, you need to go to:

  1. Dashboard
  2. Theme
  3. Edit HTML
  4. Click on the code area
  5. Press CTRL + F
  6. Search for ]]></b:skin>
  7. And just above that, paste the above code
  8. Click on Save Theme

And this is how you can change the color of a hyperlink in Blogger.

In case, you want to change link color in WordPress; you need to go to:

  1. Dashboard
  2. Appearance
  3. Customize
  4. Additional CSS
  5. Paste your code
  6. Click on Publish

And this is how you can customize link color in WordPress.

The code above will only change the link color, now let us know some more modifications in the link.

How to Underline link color in Blogger or WordPress?

Well, that is so easy, you won’t even need to do more stuff, you only need to add a single line, and everything will be done.

All you need to add is:

Just add this code below or above text-color, anywhere within a:link{ … }

Your complete code must look like this:

Output:

Link with underline

Just in case, you already have the underline (depends on theme) you can remove it by adding this code in your CSS.

Only use if you want to remove underline from the link.

Output:

Link with no underline

If you want to add background color on a link just add:

Output:

Link with background color

Umm, now you are more excited, isn’t it?


Let’s know something more:

How to make link bold in Blogger or WordPress?

There is additional CSS property called font-weight, and this will help you to make link bold in Blogger or WordPress.

All you need to add is:

Instead of bold, there are also some additional values available:

  • normal
  • bold
  • bolder
  • lighter
  • numbers between 100-900

There are also some additional values, but they are for advanced users. But the values above are enough for you.

100 is the lightest one, 400 is the normal and 900 is the bolder.

If you want to make link bold, your code must look like this:

Output:

Link with font weight of 700.

So these were some basic modifications you can do on a link in WordPress or Blogger.


But hey wait! I mean what the hell is wrong with the code above? I bet you will surely say this if you tried pasting the code above. Because, the code above will be changing link color of the whole site (navigation menu, pagination, etc.)

And you don’t want that; you only want to change only article’s link color, not of the whole site.

Don’t worry; you don’t need to do much, you need to add 2-3 words.

Let’s know:

How to only change link color in an article?

For the very first, what you need to do is:

  1. Go to any post on your blog (make sure the article has a link within it,) right-click on the link, and click on inspect element.
  2. It will show some code, all you need to do it, find the div or parent tag, and it’s class (if any)
    And then write the code as:
In my case, it was:
What this code will do is, select all the links within div tag, whose class’ name is post; in short, it will only select links in the article.

And this is how you can modify link only in the article.

Now if this is interesting, you must be willing to make some more changes. So for that let’s know something more.

How to change visited link color in Blogger or WordPress?

Well, that is too easy, trust me too comfortable. All you need to do is add following code (with same procedures as above)

Don’t paste this code within a:link{ … } as these both codes are different things. Just paste this code next to the code above.

Try giving different colors (green above), so the users can differentiate whether they have visited the link or not.

How to change link color on hover in Blogger or WordPress?

Well for that, the step is again too easy and short.

You need only to paste this code.

You can even add more modifications like removing the underline when user hover’s:

And this is how you can change the link color on hover.

How to change active link color in Blogger or WordPress?

Well, let’s know what active link is: Active link is a link which is under a click (the user is clicking on the link, and haven’t clicked)

And to change color for that, just paste this code:

The color above is orange. And this will be changed when the user is clicking on the link.

So that’s all, these are enough modifications easily possible.

Let me close with all the code written above so that you can directly paste and use.


Hope you are good to know these codes, just in case you have some issues while making these changes. Do let me know through comments. I will most definitely helping you out.

Am waiting in the comment section.

Free Exclusive Traffic Tips

About the Author: Aviral Tiwari

Hey there! It's Aviral. Am a tech-savvy who loves technology and programming. And this has resulted in making me an Android App Developer and a Website Developer.

You May Also Like

1 Comment

  1. This is really informative as many are not aware how to change the css to make the font and other visible items look in a particular style. Thanks for sharing this.

Leave a Reply

Your email address will not be published. Required fields are marked *