How to change your blogger comment box to the new version

[Latest] How to change your blogger comment box to the new version

In the world of blogging most especially for those that used blogspot platform to create their blogs, each and everyone needs to know how to manipulate codes to give a beautiful and better results.

As we all know blogspot is an old platform for building websites online and it limitations compares to WordPress is much, but that doesn't means it impossible to achieve a very tremendous look for your blogger blogs.

The only option requires of you is tweak codes and you are done. Let me encourage the blogspot users; Do you know most times if I tell my fellow bloggers that I'm still blogging using blogspot platform, some of them will be like "are you sure?" simply because I tweaked my blog to resemble a real website through playing with codes.

Also read:

How to Disable Comment Box on Blogger Posts with Pictures

SIMPLE TRICK TO ADD COPYRIGHT TO YOUR BLOG FOOTER

So in today's article I will be helping you with how you can change your blogger comment box to a new version.

How to change your blogger comment box to the new version

Before you start, make sure you have successfully backup your blog should incase you missed the steps so you can easily restore back previous settings.

1) On your Blogger control panel, locate the settings of the theme, then click on the edit HTML.

2) Search for this code  <b:skin><![CDATA[

3) Now paste the following code below 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 more preferable to change the value according to the color of your template/theme.

4) 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"}

5) Now save your changes, just click on the save button so you won't lose all you've done.