How to Change old Blogger Comments Box into New Version

Hey guys!! Are you searching tutorial for how to change Blogger comment display to the latest version? Then, you have come to the right place. 

How to Change old Blogger Comments Box into New Version

Here we will discuss step by step guide to change the comment display on blogger to its latest version. During the release of the third version of new template on Blogger, the changing appearance of the comments got more attention. However, there is one problem that if you want to try the new version of comment box on blogger then you have to change the template. But you don't have to worry because here we will discuss how to change Blogger comment display to the latest version without changing the whole template. So, let's dive in!

How to change old Blogger aka Blogspot website comments section into new version comments section

Here, we will discuss step by step guide to change the Blogger comment display to the latest version!

1. Go to Blogger site and Sign-in with your Google account.

2. In the left corner, Click on Themes > Edit HTML.

How to Change old Blogger Comments Box into New Version

3. Now, find the code <b:skin><![CDATA[

and paste the following code exactly. After or Under ;

 <!-- 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>


You will see #008c5f inner value body.link.color in the comment box which is the color of link. Now according to your template color, change its value.

4. After pasting this code, search for data:post.commentFormIframeSrc and select everything and replace with the following code ;

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

After changing this code it will look something like that ;

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

5. After doing all these things, don't forget to save the settings by clicking on Save button.


Conclusion

Above we have discussed the tutorial for how to change Blogger comment display to the latest version. During the release of the third version of new template on Blogger, the changing appearance of the comments got more attention. By following above mentioned steps anyone can easily change old Blogger aka Blogspot website comments section into new version comments section. I hope this information is helpful to you all.

Related Posts

Post a Comment