Change Old Blogger Comments Form Layout with New

Blogger recent update came up with many and new features like widget updates, updates in templating tags, etc. and layout enhancements were also one of them.

Blogger developers and designers not even change the layout of the blogger dashboard but also the layout of blogger templates that are of version 3, which was also released in this update.

Comments form was one of the things of which the layout design was updated and the recent blogger comments form design is more impressing then the old one.

Most of the blogger users, that were using templates of version 1 might have this question in their mind how they can change old blogger comments form layout with a new one, like me. I searched and founded a solution which I am going to share with you.

Now if you have a look at the default templates of blogger you'll find the solution but for everyone, it's not possible. You need to understand the blogger template structure for that.

To change old blogger comments form layout with the new one you have to make some changes in the code. There are some blogger templating tags that you have to put in the blog template code.

Steps to perform:

So now if you want to make your blogger blog look awesome then follow the steps provided below and change old blogger comments form layout with new version 3 layout.

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for <b:skin> or similer opening dressing tag

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Now copy the code provided below and add it after the tag which we have searched in step 4.

<!-- Variable definitions -->
<Group description="Default Customization Vars">
    <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>

6. Now search for data:post.commentFormIframeSrc and replace it with data:post.commentFormIframeSrc + &quot;&amp;amp;skin=contempo&quot; + data:variantParam
7. Save Theme/Template

If a blogger variable tags are already included in your template then you will get an error message of duplicate dressing variables for that you need to remove the matching one from the above code.

ProTip:

If you followed the blogger template skeleton code then you don't have to change anything that code is already having all the above stuff.

Conclusion:

That's it! Now your blog is having new blogger comments form layout. If you want to see the preview, see my blog's comments form. You will notice the changes in my blog comments form if you are my old viewer. :)