Add Wordpress Like/Style Comments In Blogger Blog

Blogger is the best blogging platform for the newbies to start their blog. It's best as it offers a lot of features for free than any other blogging platform. One of the most important part in Blogger is the comment section. But what happens when you get tired of the standard themes and want to overhaul the look on your own terms? The answer is … create your own theme! Today we are going to look at how we can change the standard style of the comments section. If you want your comment section to be more attractive Now this tutorial will show you Add Wordpress Like/Style Comments In Blogger Blog.

So if you want to replace your default comment section in blogger and change it into wordpress like comment section just follow the steps below.

Blogger Comment Box Series

1. Customize Blogger Comment Form

2. Add Recent Comments Widget in blogger

3. Facebook Comments Box For Blogger Blog

4. Install IntenseDebate Comment System On Blogger

5. Add Wordpress Like Comments In Blogger

6. Add Expand/Collapse Blogger comment Box To Blogger

7. Add Threaded Comments With Different Author Color Comments

8. Add a Reply Button To Blogger Comments

Wordpress Like Comments For Blogger Demo

LIVE DEMO

How To Add Wordpress Like Comments

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

• Replace the above code with the code shown below

<div class='comments'>

<b:loop values='data:post.comments' var='comment'>

<div id='comments-outer'>

<div class='comment-author'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>

<img class='avatar' expr:src='data:comment.favicon' height='35px' rel='dofollow' width='35px'/>
</b:if>


<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>

<b:else/>

<data:comment.author/>


</b:if>

<span class='says'>said on : <data:comment.timestamp/><b:include data='comment' name='commentDeleteIcon'/></span>
</dt>

</div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</div>

</b:loop>

</div> 

Now You Have to remove the already present CSS part of your comments section. To remove it, find the word "comments" in the CSS part of your template and remove the code. The CSS code lie between the following two tags.

<b:skin> CSS PART OF YOUR TEMPLATE </b:skin>

The CSS Code look like the picture shown below

• Now Find the code ]]></b:skin>  using ctrl+F and  replace it with the code shown below

/* Comments By www.mybloggertools.org */

#comments{

background : #fff url() no-repeat top;

float : left;

width : 590px;

font-size:12px}

#comments h4{ margin:1em 0; font-weight:bold; font-size:15px; text-shadow:1px 1px 1px #ddd; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:#0084ce}

#comments-outer{ background:#f4f4f4; border:1px solid #ddd; margin:1em 0 2.5em; padding:10px; line-height:1.6em}


.avatar-image-container{margin-right:20px; padding:0; float:right; width:48px; height:48px; margin-top:-20px}

.avatar-image-container img{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWU4wFGxQ4RKaAFl2Ieyvr92PUJitQyXrG9uPqYciGKUebDoWA77oHTuKHS3AH7a3UsDlCvGVLnCXvnPHkwtxNiu5WxvRjsTemd4jqoie2WqEBSuhE8fcYsBW2iubTIJyVaqCnC2i57M/s1600/latesthack.png); width:48px; height:48px; border:1px solid #ddd}

.deleted-comment{ font-style:italic; color:gray}

.comment-body-author{background:#f4f4f4}

]]></b:skin>

• Now save your template

Like it? Share it.