Change link color in blogger post | The links we given in the blog posts have a crucial role in blog seo.when we put links of related articles in a post, it will make the people spend more time on our blog,this will helps to reduce the bounce rate of the blog, and also in terms of ranking.
For a new blogger, this is a big deal if he uses blogger blog, Most of the free templates doesn't have a code to highlight the links, but some of the templates highlight links when we mouse over it. but it doesn't make any sense if a reader can't see the link when he reaches an article. Who's going to check your article top to bottom for links..Change link color in blogger post
But by a simple method, we can do it manually. First, you need to identify your problem
Understand the problem
- Links are highlighting when you mouse over it
- Links never highlighting
Probably your theme may be customized to highlight the links when a reader mouses over it, or at the moment when it is clicked, or it may not be customized to highlight links. Change link color in blogger post
Warning! Take a backup of your theme Before making any changes. Change link color in blogger post
Understand the codes
With CSS codes, we can style the links in a different way
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
a: link - a normal unvisited link
a: visited - a link user has visited
a: hover - a link when the user mouses over it
a: active - a link the moment clicked
Fixing the problem
The links are highlighting only when a user mouses over it.
This is because your theme is customized to only highlight links when a user moves the mouse over it. Change link color in blogger post
maybe the code to highlight the link already there, but by default, the color would be $maincolor (default color of your fonts)
we need to check does it have the code or the color code is different from the font color of your blog. Change link color in blogger post
Go to themes > edit HTML and press ctrl+f inside the editor, type a: visited or a: hover and search it. you can see a: hover at many places so look carefully and identify the code section. most of the time the first a: hover or a: visited be the code we need to edit.
Change link color in blogger post
If it has only this code
a:hover{
color:#ff00000;
}
Then add this code just above it
a:link{
color:colorcode;
}
If you found the a: visited code like this
a:visited {
color:$maincolor;
}
Just change the $maincolor and replace your color code. Change link color in blogger post
If you can't find none of the above codes then just copy & paste the code given below, just above the ]]></b:skin> code
The CSS code
color: #;
}
a:visited {
color: #;
}
a:hover{
color: #;
}code-box
Replace # with the color code you like and save. Don't do anything more if you have no idea about coding. Change link color in blogger post
Now open your any post and check whether it works.
- note > If the above code, not works try these code
color:#;
}
.post-body a:link {
color:#;
}
.post-body a:visited {
color:#;
}
.post-body a:hover {
color:#;
}code-box
Now save your theme by clicking the save button. Change link color in blogger post
you can delete a: hover code if you don't want to change link colour when a user mouse over it.
If you don't know how to add CSS then do it this way
Go to Theme > customization > Advanced > Add CSS.
Paste the CSS codes here and click apply to the blog. Change link color in blogger post
That's all, now you have made it
Conclusion
In this tutorial, we discussed how to highlight links in blogger posts. I hope you found this tutorial useful. If so, would you consider sharing it with others who might appreciate it as well?
Change link color in blogger post
If you have any doubt regarding this post please comment below
Also read
Disclaimer: This post may contain affiliate links that earn me a small commission, at no additional cost to you. I only recommend products I personally use and love, or think my readers will find useful.
Read other related articles
FOLLOW THE GeekSpeaks AT TWITTER TO GET THE LATEST INFORMATION OR UPDATE
Follow GeekSpeaks on Instagram to get the latest information or updates
Follow our Instagram