Blogger Comment Box |
If your blogger template/theme is still running on the old blogger comment section and you have been trying to update it to the new version then, this is the right post for you.
With the release of the new version 3 blogger template, blogger made huge changes to a lot of things which included the appearance of the comments.
Why you need the new blogger comment box.
There are a few reasons why the latest version of the blogger comment box is recommended. Here's a few:
- Responsive
- Attractive
- SEO friendly
How to Change (Blogger) Blogspot Comments to a New Version
I will try to make this tutorial as easy as possible. Just follow these steps and you will be done in no time.
<b:skin><![CDATA[
and paste the following code 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 advisable to change the value according to the color of your template.2. 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"}
The complete code is like this:
<!-- 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'/>
3. Don't forget to save your changes by clicking the Save theme button.
You can now view your blog and see the changes.