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 :

https://web.archive.org/web/20140702231525if_/http://www.youtube.com/embed/i8tP20UQ-7c
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.

Embed Google Maps Get Directions Form To Your Blog

https://web.archive.org/web/20140702231525if_/http://www.youtube.com/embed/GbzyPFnDcDo
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.

Author – 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.