How to Change Blogger Comment Form Design

How to Change Blogger Comment Form Design - Xady Tech 

After the new update of the blogger, we got new components on blogger like gadget refreshes, refreshing in format labels, and design upgrades. 

Blogger engineers and creators did not change the design of the blogger dashboard yet in addition the format of the blogger is presently form 3, which is additionally delivered with the new update. 

On the blogger, you got 2 sorts of remark structure plan. Assuming you need to see the two remarks from the demo then, at that point take a gander at the underneath pictures.

Before: 

Old Comment Form

And how did this comment form come from this CSS code

After:

New Comment Form

Assuming you need to change the old blogger Comment box then you need to add some CSS Group and variable to your topic, so assuming you need to add then, at that point go to the roar steps:

Go to Blogger Dashboard

Go to Theme/Template Section

Click Edit HTML

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.

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>

Now search for data:post.commentFormIframeSrc and replace it with data:post.commentFormIframeSrc + &quot;&amp;amp;skin=contempo&quot; + data:variantParam

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 is it's. Presently in the event that you open any post you will get the new comment box of the blogger. Much obliged for with us.

Copyright - 2021 - Xady Tech