Wednesday, April 18, 2012

How to number comments in Blogger/BlogSpot

This Blogger hack will show you how to add comment count inside a speech bubble, so that you & your readers can use the numbers to mention or point to a particular comment on any of your posts and besides this, it could as well improve the look and feel of your blog.

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

UPDATE! Now you can add comment bubble in your threaded comments too. Read this tutorial:
How to Add Numbered Comments In Threaded Comments
blogger blogspot, tricks

How to add numbered comments on our Blogger/Blogspot blog
how to blog, blogspot blogger

Step 1. Go to Dashboard - Template - Edit HTML (click on Proceed button, if needed)


 Step 2. Select "Expand Widget Template" (make a backup)

    Step 3. Now find (CTRL+F) the following code in your template:

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

    Step 4. Immediately above/before it, paste this code:

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

    Step 5. Find this code:

    <data:commentPostedByMsg/>

    Step 6. And immediately below/after it, copy and paste this:

    <!--comments-count-starts-->
    <span class='comments-number'>
    <a expr:href='data:comment.url' title='Comment Link'>
    <script type='text/javascript'>
    CommentsCounter=CommentsCounter+1;
    document.write(CommentsCounter)
    </script>
    </a>
    </span>
    <!--comments-count-stops-->

    Step 7. Find (CTRL+F) this tag in the template:

    </head>

    Step 8. Paste this code just above/before it:

    <!-- comments-count-starts-->
    <style type="text/css">
    .comments-number a:link, .comments-number a:visited {
    color: black !important;
    text-decoration: none !important;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAivPp1I8mg-8Dhl_G1JAkqebZqYqjASZ6f5pwNbCgl5TkR0CCuyEex2DK5juwST-OHNsHFg_EAgYHhaqIkBLkcBpINJ70QZ44r4aKd8VBCdcKmbodtrUdca7OGnKQW4e5VoiNU2O4FpVs/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;
    }
    </style>
    <!-- comments-count-stops-http://helplogger.blogspot.com-->

    Note:
    • To change the comment bubble, replace the red text from above with your own address
    • To change the color of the numbers, replace the blue text with the hex value of your color

    Comment Bubbles 

    To choose a comment bubble, right-click on the 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 could use any image instead of the one linked in the code above (STEP 8) but after that, you should modify the size values (width and height), so that the numbers inside the bubble to be correctly adjusted.

    Step 9. Save the template... and enjoy your comments :]

    You might also be interested in this tutorial from the same category:
    How to Add a Comment Bubble to Blogger Post Titles.



    adsense
     
     
    Copyright © blog
    Blogger Theme by Blogger Designed and Optimized by Tipseo