We already went over how to style your Blogger sidebar widget titles with background images, and since then I have received a few requests to show you how to style the comment link at the bottom of each post as well.
Making your comment link appear bolder/brighter will help to separate it from that whole post footer area as sometimes it can get a little cluttered down there depending on how many labels you are using and what other features you’ve chosen to display.
It’s really quite easy.
We will be using some CSS again to make the comment link stand out so that you can draw more attention to it, which in turn should hopefully help increase visitor commenting.
There are two classes we will be using to make this happen: .comment-link and a.comment-link
We’ll first make the comment link have a simple background colour that will highlight the text.
Go into the Template Editor (Dashboard > Template > Customize) then to the CSS section (Advanced > Add CSS).
The following code will change the area around the comment text:
.comment-link {
background-color:#fed4d5; /*this is the highlight colour of the comment link*/
padding:10px; /*this provides space around the highlight colour and the text*/
}Now, we can change the font if we like, as shown in red:
.comment-link {
background-color:#fed4d5; /*this is the highlight colour of the comment link*/
padding:10px; /*this provides space around the highlight colour and the text*/
font-size: 16px; /*this is the size of your font*/
}If you want to change the colour of the comment link text, you will need to use the class:
a.comment-link {
color: #d76365; /*the colour of the font */
}You can play around with different CSS styles and colours if you like.
You can even try adding a background image to the comment class just like we did in the sidebar titles tutorial.
This post should at least help you grasp the basics of editing the comment link and the classes you need to use to change the appearance!
