7 Jan 2013

couch mode print story

How to number comments in Blogger/BlogSpot

In the last tutorial i showed you how you can add a comment bubble to blogger posts titles. But this Blogger hack will add numbers with a cool speech bubble in all the comments in your blog. Each number will be linked to that comment so that you & your readers can use these numbers and corresponding links to mention or point a particular comment on any of your posts.

This works only with previous blogger commenting system, therefore if you want to add this hack, you should first remove Blogger threaded comments. Learn here How to remove Blogger threaded comments

UPDATE! Now you can add comment bubble to your threaded comments too. Please read this post: Numbered Comments On Threaded Comments for Blogger/Blogspot

So let's start adding numbered comments on our Blogger/Blogspot blog

how to blog, blogspot blogger

Step 1.

If you are using the old Blogger interface:

  • Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

  • Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Now find (CTRL+F) this code in the template:

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

Step 3. Immediately above/before that, paste this code:

<script type='text/javascript'>var CommentsCounter=0;</script>

Step 4. Now find this code:


Step 5. And immediately below/after it, paste this code:

<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>

Step 6. Find (CTRL+F) this code in the template:


Step 7. And immediately above/before it, paste this code:

<!-- comments-count-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(http://3.bp.blogspot.com/-zrPssaxSG2E/T47v-XB1EWI/AAAAAAAAB8E/uUz8RiJnW2U/s1600/comment+bubble+1.png) no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
<!-- comments-count-stops-http://helplogger.blogspot.com-->

To change the image, edit the red code above
To change the color of the numbers, edit the code in blue

Images you may use (right-click on the desired image and select "Copy Image Address/Location"):

how to blogblogger blogspotblogspot blogger, how to blogwidget blogger blogspotblogs, how to blogblogspot or blogger, how to blogtutorials, how tocomments, how to, blogspot bloggernew comment, how to blogblog design, bloggerblogger.com

IMPORTANT: You may use any image instead of the one linked in the code above (STEP 7), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.

Step 8. Finally save the template... and enjoy your comments :]


Post a comment

Blogger Widgets