How to change old blogger comments form layout with new

After the new update of the blogger, we got new features on blogger like widget updates, updating in template tags and layout enhancements.

Blogger developers and designers not even change the layout of the blogger dashboard but also the layout of the blogger is now version 3, which is also released with the new update.

On the blogger, you got 2 types of comment form design. If you want to see both comments from the demo then look at the below images.

Old Comment Box

New Comment Box

If you want to change the old blogger comment box then you need to add some CSS group and variable to your theme, so if you want to add then attend the bellow steps:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for <b:skin> or similar 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 you see all variable tags are already added to your blog theme, then don't add the code of this article just follow step 6.

Conclusion

That's it's. Now if you open any post you will get the new comment box of the blogger. Thanks for with us.