Wordpress Like Comments For Blogger/Blogspot Blogs

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 48 Comments

Last week, one of my blog readers sent me a mail stating that he wanted to add a comments section on blogger like the one displayed in my blog right now. I started receiving few mails from different readers regarding the same hack for the past few days. So, I wanted to share this hack on "How To Add A Wordpress Like Comments Section For Blogger/Blogspot Blogs?" with my readers. If you wish to take a look at the final output, then scroll down and view the comments section on my blog or else, just check out the screen shot below.

To add this "Stylish Wordpress Type Comments Section" on your blogger blog, just follow the following steps. Please, make a back up of your template before you make any modifications. To create a back up, navigate to "Design->Edit HTML" and click on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

1. Click on the expand template icon. Now, search for the following piece of code in it. You may use "CTRL+F" to fasten your search results.

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

2. Replace the following block of code with the code mentioned in step 3.

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

3. The following code should be replaced with block of code mentioned in step2.

<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 :</span>

</dt><span style='float: left;'><b:include data='comment' name='commentDeleteIcon'/></span>

<div class='comment-meta commentmetadata'>
<data:comment.timestamp/>
</div>
</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>

4. Now, its time to add the CSS part for this code. But, you need to remove the already present CSS for your comments section. To remove it, find the word "comments" in the CSS part of your template and remove the related code. The CSS part of your template are the codes which lie between the following two tags.

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

Once, you find the code with name "comments", remove the blocks of code associated with them. Please have a look at the following picture for better understanding.

If you still do not know what code should be removed, then ping me via email and I will solve your problem.
5. Take a break with a cup of coffee:) Now, find the following code in your template.

]]></b:skin>

6. Copy and paste the following piece of code just above/before the line mentioned in step5.

/* Comments Section By www.newbloggingtipz.com */
#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:$sidebarcolor}
#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/AVvXsEglHGuyFKyjKBl5xGPIjp058fSdIToYig9X2n59rL4LAutnnZvDJHmbu1qIvfrMSRiAUr6Ha5LffkTtVL-HFlCsNs2q37a6Q-QsypnQ-FXpA7Tv80595pugegAYRO54JE_wYhkNp0YA4EQ/s400/grav.png); width:48px; height:48px; border:1px solid #ddd}
.deleted-comment{ font-style:italic;   color:gray}
.comment-body-author{background:#f4f4f4}

7. Huh!!! That's it!!! Save your template and you will find the "Wordpress Style Comments Section" on your blog.

For further customizations like adding a background to the comments section, etc.. you can edit the CSS part  or view "Our Services" page for any type of customization seen on blogger blogs. How ever, I have provided space for various customizations in the code by default. So, if you know little HTML then, the job should be very easy!!!

I hope you enjoyed this hack. If you need any clarifications regarding this hack, then feel free to comment on my blog or ping me via email. I will clarify your doubts as early as possible. Also, we would be happy to receive comments from readers who understood what I blabbered in this post and successfully installed this hack on their blog:)

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Blogger Tutorials