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