Android & Blog Stuff

Many bloggers have a question in mind "How To Add A Wordpress Like Comments Section For Blogger/Blogspot Blogs?". Here's the answer for it.

To add this "Stylish Wordpress Type Comments Section" on your blogger blog, just follow the following steps.
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. Login to blogger >Design > Edit Html > 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 step 2

<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 post a comment with your blogurl and I will solve your problem. 
5.Now, find the following code in your template.

]]></b:skin>

6. Copy and paste the following piece of code and paste above it.

/* Comments Section By www.Magazineblogger.co.cc */
#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/AVvXsEhpMFoZGF28acTqegVXMDV6fP-so4qmVONyfEn-FFo_IHzRGurqjCU3-3Wi-7_MrF9uDV7YI2t3BAsXDAX5MgB_Efv0o9IjPQLEQzkkZ6Dfm60M242JJJ_2v1Nn9zm8VpYJTiQ7sZaFDis/s400/grav.png); width:48px; height:48px; border:1px solid #ddd}

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

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

7. Save your template and you will find the "Wordpress Style Comments Section" on your blog.

If you have any trouble making it work, drop in your comments.