Adding Comment Counter in a Blogger.

What about adding a comment counter in a Blogger.Comment is very essential in Blog.Many visitor leave comments and author reply the comments as answer.But what about improving the comment section for better communication between author and Visitor.

Advantage of Comment numbering.

1. Better communication better author and Visitor.
2. Easy to reply answer.
3. You can give then answer by giving comment number for previously answered question.
4. It help to give comment unique permanent link so that we can send visitor in right track.

Installing Comment Counter in a Blogger.

1. Go to Blogger Dashboard>Design or Template>Edit HTML
2. Tick on Expand widget.
3. Back up your template
4. Find these lines

   <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'>
                 Some more contents here..........
                 <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'>
                   Some Contents more here...
               <dd class='comment-footer'>
               </dd>
             </b:loop>
           </dl>

5. Find Line 1 and line 9. Line 1 may be different in Layout Templates i.e it is <dl id='comments-block'>.Just go and find the codes similar to it.
6. Add following code just before <b:loop values='data:post.comments' var='comment'>

   <!--  comment counter Start by bloggerrounder.blogspot.com -->
   <script type='text/javascript'>
   //<![CDATA[
     var regexpatt = new RegExp('commentPage=([0-9]*)');
     var results = regexpatt.exec( window.location.href );
     if(results == null)
   {
       var CommentsCounter = 0;
   }
     else
   {
       var CommentsCounter = (results[1] - 1) * 200;
   }
   //]]>
   </script>
   <!-- set comment counter End by bloggerrounder.blogspot.com-->

7. Add following codes just before line 8 ( before </dt> tags)

   <!-- Comment count and display START by bloggerrounder.blogspot.com -->
   <div class='br-commentnumber' style='font-size: 20px;padding:0 10px;'>
   <a expr:id='&quot;comment-&quot; + data:comment.id' expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment permalink' style='float:right; margin-top:-25px;'>
   <script type='text/javascript'> 
   CommentsCounter=CommentsCounter+1; document.write(CommentsCounter)
   </script>
   </a></div>
   <!-- Comment count and display END by bloggerrounder.blogspot.com -->

8. The result should looks like this

   <dl expr:class='data:post.avatarIndentClass' id='comments-block'> 
   <!-- set comment counter Start by bloggerrounder.blogspot.com -->
   <script type='text/javascript'>
   //<![CDATA[
     var regexpatt = new RegExp('commentPage=([0-9]*)');
     var results = regexpatt.exec( window.location.href );
     if(results == null)
   {
       var CommentsCounter = 0;
   }
     else
   {
       var CommentsCounter = (results[1] - 1) * 200;
   }
   //]]>
   </script>
   <!-- set comment counter End by bloggerrounder.blogspot.com -->
   <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:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/>	
   <!-- Comment count and display START by bloggerrounder.blogspot.com -->
   <div class='br-commentnumber' style='font-size: 20px;padding:0 10px;'>
   <a expr:id='&quot;comment-&quot; + data:comment.id' expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment permalink' style='float:right; margin-top:-25px;'>
   <script type='text/javascript'> 
   CommentsCounter=CommentsCounter+1; document.write(CommentsCounter)
   </script>
   </a></div>
   <!-- Comment count and display END by bloggerrounder.blogspot.com -->
   </dt>
   <dd class='comment-body'>
   ... some more contents here....
   </dd>
   </b:loop>
   </dl>

9. Click on orange Save button.

Styling the Comment Numbering.

• Style the widget by add CSS.Add the CSS codes.

  .br-commentnumber { 
  /* CSS Styling Codes Here */ 
  }

• If you don’t know where to add CSS then learn it from here.

Bye.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.