How to Change Blogger Comment Box to the Latest Version

Blogger Comment Box 

In this post I will be showing you How to Change Blogger Comment Box to the Latest Version.

If your blogger template/theme is still running on the old blogger comment section and you have been trying to update it to the new version then, this is the right post for you.

With the release of the new version 3 blogger template, blogger made huge changes to a lot of things which included the appearance of the comments.

Why you need the new blogger comment box.

There are a few reasons why the latest version of the blogger comment box is recommended. Here's a few:

1. Responsive
2. Attractive 
3. SEO friendly

How to Change (Blogger) Blogspot Comments to a New Version

I will try to make this tutorial as easy as possible. Just follow these steps and you will be done in no time.

1. On your theme editor, Search for the code <b:skin><![CDATA[ and paste the following code exactly "AFTER / BELOW" it.

<!-- Variable definitions -->
<Group description="Komentar Baru Blogger (Contempo, Soho, Emporio, Notable)">
 <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>
 <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/>
 <Variable name="body.text.font" description="1"
  type="font"
  default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/>
 <Variable name="posts.background.color" description="2"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="body.link.color" description="3"
  type="color"
  default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.visited.color" description="4"
  type="color"
  default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.hover.color" description="5"
  type="color"
  default="#1d2129" value="#1d2129"/>
 <Variable name="blog.title.font" description="6"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/>
 <Variable name="blog.title.color" description="7"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="header.icons.color" description="8"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.font" description="9"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="tabs.color" description="10"
  type="color"
  default="#ccc" value="#cccccc"/>
 <Variable name="tabs.selected.color" description="11"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.background.color" description="12"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.color" description="13"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="tabs.overflow.selected.color" description="14"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.color" description="15"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.font" description="16"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.font" description="17"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.color" description="18"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.icons.color" description="19"
  type="color"
  default="$(body.text.color)" value="#6c6f74"/>
 <Variable name="labels.background.color" description="20"
  type="color"
  default="#008c5f" value="#008c5f"/>
</Group>

Note the Value #008c5f in body.link.color that is the color of the link in the comment box. It is advisable to change the value according to the color of your template.

2. Search data:post.commentFormIframeSrc which is more than one. Select EVERYTHING and REPLACE with the following new Blogger comment code:

data:post.commentFormIframeSrc appendParams {skin: "contempo"}

The complete code is like this:

<!-- Before -->
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<!-- After -->
<a expr:href='data:post.commentFormIframeSrc appendParams {skin: "contempo"}' id='comment-editor-src'/>

3. Don't forget to save your changes by clicking the  Save theme button.

You can now view your blog and see the changes.

Final words

We hope you have been able to learn How to Change Blogger Comment Box to the Latest Version. If you have any questions feel free to use the comment section below.