How To Change Your Blogger Comment Box To The New Version

How To Change Your Blogger Comment Box To The New Version

How To Change Your Blogger Comment Box To The New Version

So I'll be teaching you guys on how to change a blogger comment box to the latest version. If you have any new templates/themes that still runs the old blogger comment section, and you have always been looking for a way to update it to the latest version, here you go. with the new launch of the latest 3 blogger template, the blogger made a big change to a lot of things which also include the appearance of the comments.

The latest comment section is:

- Responsive

- SEO friendly

- Attractive

Steps on How to Make the latest blogger comment box

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

This is how the complete code will look like:

<!-- Before --> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <!-- After --> <a expr:href='data:post.commentFormIframeSrc appendParams {skin: "contempo"}' id='comment-editor-src'/>

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

Find this helpful? Don't forget to share with your friends and family 
Related Posts

Related Posts


  1. Welcome to best10data.com

    Free seo tools, image editing tools, text editing tools and more.



  2. To participate in a group buy, simply search for the relevant product or service on the internet and find the group buy page. There, you will be able to find all the details about the purchase, including the required information such as subscription information and payment details. Make sure to read the group buy rules carefully before making your purchase.


  3. Mixhubb is Free online Meeting/Conferences/Webinars self-managed Event Platform with one month free. Free Sign up: https://bit.ly/3wkb40f

    Include >>Free Subscription >>

    >Unlimited Events
    >100 Attendees Credit/Month
    >72 Hours/Month (Event length)
    >10 Booth/Month
    >Networking Tables
    >1 Organiser account
    Free Sign up: https://bit.ly/3wkb40f