Change Old Blogger Comments Form Layout with New

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
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Now copy the code provided below and add it after the tag which we have searched in step 4.
  7. <!-- 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>
  8. Now search for data:post.commentFormIframeSrc and replace it with data:post.commentFormIframeSrc + &quot;&amp;amp;skin=contempo&quot; + data:variantParam
  9. 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. :)

8 Comments

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.
  1. When your next video upload on softwebtuts YouTube channel?👨‍🏫👨‍🏫👨‍🏫

    ReplyDelete
    Replies
    1. Video will be uploaded very soon. Don't worry!

      Delete
  2. but jo aap theme banaoge tuts me wo apke jaisa hoga yeh batao please

    ReplyDelete
    Replies
    1. Dear main apko blogger template development sikha rha hn jab ap seekh jao gy to ap khud aisa bna lena but main apko basic template sikhaon ga usme styles wagera ko ham cover ni kren gy.

      Delete
  3. bro ye mega menu kaise banayi hai tumne?

    ReplyDelete
    Replies
    1. I remember k apney pahly bhi comment kiya tha but i am sorry k main article post ni kr paya.

      Main free ho kr article port kr dnga.

      Delete

Post a comment

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

Recent Comments

{getWidget} $results={3} $label={comments} $type={list}