How to Change Blogger Comment Box to the Latest Version

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.

Don't forget to leave a comment through our comment section below and also try as much as possible to share this post with your friends on various social media platforms.
About HowNaija Blog Hownaija.com.ng is a 'How To' Blog That Provides Information On A Wide Range Of Topics That Can Improve Our Knowledge.
Newer Posts Newer Posts Older Posts Older Posts

Related Posts

2 comments

Kindly leave your comment(s) here!

Your comment(s) are appreciated.

Do Tick the Notify Me box to get notified when I reply your comment.
  1. Thank you for this! A tutorial I never knew I needed. By the way, can you please teach how to make a sticky sidebar? All tutorials on the net seems outdated :/ Thank you in advance!

    ReplyDelete
    Replies
    1. Nice to know my post was helpful. Well, many people have also requested for that tutorial I'm currently working on it.

      Delete