17 February 2013

Customize Blogger Comment Box Front,Size and Colour

Customize Blogger  Front,Size and ColourAre you a coder?love to play with codes?We also,love to play with the codes of blogger template.Love to add widgets and many other template tweaks with our favourite blogging platform.While playing with it's code just realized why don't we do something new with the blogger comment section,mainly the comment box default front,size,colour?This may gave our blog something cool look,something unique.Cause blogger comment box default front,size and colour is so old and traditional. May be you also don't like the blogger default style comment box front,size and colour.Want to change it?Make it some different?Then we're here for you.Let's do it.

 Must Read : Number Comment System for Blogger

Customize Blogger Comment Box

  • Navigate to Blogger Dashboard - Template  - Edit HTML - Proceed - Search(ctrl+f) for /* Variable definitions - Paste the following directly below the lines (See screenshot below)

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

  • Click on Save Template when you're done. Should you receive a bx error, delete Line 1 and Line 5 from the code above and try again.
Now Search(ctrl+f) for find for /* Comments ----------------------------------------------- */ - Paste the following under the dashed line

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

  • Next click on Save Template when you're all done.

  • Next navigate to Blogger Dashboard ('House' symbol) - Template - Customize - Advanced.

You will now see a new entry -- Comment Font. Click on it, and the rest is self-explanatory. 

Note:Since you cant view comments on the front page, you won't be able to preview the change using Template Designer. However clicking on 'Apply' will apply the changes and you can then see the change while moving onto your blog.

 Must Read : Show Comment Box Above Comments on Blogger

That's it.Wish this tutorial work perfectly for you.If still having any problem ask for help through the below comment box.Thanks.
Articles You May Like

5 comments: Leave Your Comments

  1. Thank you! I found a really lovely free layout for my blogspot shopping site and this would immensely help for I need to make the font a bit more sophisticated

  2. Thank you so much! I applied this on my blog (still in construction) and it worked beautifully. I'm also in the process of learning how to code, so this is very helpful.

  3. I just want to change this white background . is there any way to do this? i am going crazy trying to do so.