• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Numbered comments on threaded comments for Blogger/Blogspot

Posted by Mohsin On 6/02/2012 11:26:00 AM No comments

In a previous tutorial you've seen how you can add numbered comments to your blogger blog, unfortunately, this trick worked only for those who don't have the reply option and are still using the old blogger commenting system. But we won't have any problem this time because this tutorial will show you how to add numbered comments with comment bubbles on the threaded comments, as well ;)

What the following CSS trick will do for you:

  1. When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1. 
  2. Then, each time the code flow goes through a review of any level, either the original comment or a reply (.comment-thread li), it will bring us in front (:before) of the comment's body the number that is the counter.
  3. Finally, this is incremented in the counter (counter-increment).
See the screenshot:
count comments, comment bubble, forum, blogger

Isn't that great? I'm pretty sure many of you have been waiting for this cool trick. So, let's begin applying it for our threaded commenting system.

Steps to add bubble comments count

Step 1: From your Blogger Dashboard, go to Template and click on the Edit HTML button:

    ... click anywhere inside the code area and press CTRL + F to open the Blogger' search box.

    Step 2: Type the following tag inside the search box and hit Enter to find it:
    ]]></b:skin>
    Note. you have to click on the arrow next to it, then search the ]]></b:skin> one more time 

    Step 3: Add the following code just above ]]></b:skin>:
    .comment-thread ol {
    counter-reset: countcomments;
    }
    .comment-thread li:before {
    content: counter(countcomments,decimal);
    counter-increment: countcomments;
    float: right;
    z-index: 2;
    position:relative;
    font-size: 22px;
    color: #555555;
    padding-left:10px; 
    padding-top:3px; 
    background: url(
    http://4.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png) no-repeat;
    margin-top:7px; 
    margin-left:10px; 
    width: 50px; /*image-width size*/
    height: 48px; /*image-height size*/ 

    }
    .comment-thread ol ol {
    counter-reset: contrebasse;
    }
    .comment-thread li li:before {
    content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
    counter-increment: contrebasse;
    float: right;
    font-size: 18px;
    color: #666666;
    }
    Note:
    • if you want to have no bubble icon, remove the code in red (including the address in blue)
    • to change the comment bubble, replace the code in blue with the URL address of your own icon. If you're not sure what icon you should use, you can find some cool icons in my previous posts (see these tutorials here and here)
    • to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
    • to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top
    Step 4: Now Save the Template and you're done!

    If you enjoy reading this blog, please share and subscribe. For any questions you may have, leave a comment below.

    0 comments:

    Post a Comment

    All types of Comments are welcome