How To Change The Comment Font Face And Color On Blogger




| 3 comments

As usual the inspiration behind this post is from a blog I was working on.I was actually finished the job when the blog got it's first comment (Always Exciting) it was only then we realised the comment font color clashed with the background color making it very hard to read.Take a look at the screenshot below to see how the font color is off white (#f8f8f8) making it clash with the white background.Of course you might just want to give your comments some style and a cool font.

Previously you could change the comment font via the template designer but that option was lost when threaded comments became available.So for this I will use the same Process as Southern Speakers did when the Threaded comments first appeared.



We will add some code to your template to make the comment font once again available to edit in the template designer.This is what we get :



First we will add the code that will allow you to edit the Comment font in the template designer.

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)
Variable definitions

This will appear something like this on your template :

/* Variable definitions
====================

Step 3. Directly below this add this code :

<group description="Comment Font" selector=".comments .comments-content .comment-content, .ss">
<variable default="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" description="Comment Font" name="sscommentfont" type="font" value="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
<variable default="#000000" description="Comment Color" name="sscommentcolor" type="color" value="#000000">
</variable></variable></group>

It will now look as in the screenshot below with the code we added highlighted :


Step 4. We now need to add just a few lines of CSS.

i In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.


ii Copy and Paste the following code into the Css Section then click Apply To Blog.

.comments .comments-content .comment-content, .ss{
font: $sscommentfont;
color: $sscommentcolor;
}

You can now easily change the comment font via the template designer.

Drop your comments and questions below.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

3 comments:

  1. The tips you mentioned is just fantastic.Quality contents is key to drive large amount of traffic on your blog.So Be unique… Thanx for sharing.....

    ReplyDelete
  2. Yet another masterpiece, I guess changing colors of comment font commentator will be really cool.

    ReplyDelete
  3. I was searching for this since long, Now I will try this method and get back to you if any problem occurs. Thanx a lot.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us