Search
 
 

Display results as :
 


Rechercher Advanced Search

Latest topics
RSS feeds


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 



How To Add Numbers To Blogger Threaded Comments

View previous topic View next topic Go down

How To Add Numbers To Blogger Threaded Comments

Post by Admin on Wed Jun 12, 2013 1:05 pm



Today I am sharing a very simple CSS trick which will add numbers to your threaded comments inside a comment bubble.It will add numbers like this way 3,3.a,3.b & 4 here 3,4 are the main comments and 3.a,3.b are the replies,you can see a screenshot below in image.To apply this trick to your threaded comments,you just have to copy and paste some CSS code in your template and you are done.So without waiting anymore lets jump to the tutorial.







    Go to Blogger Dashboard > Template

    Download a copy of your template

    Click On Edit HTML



    Now Using CTRL+F search for the below code,

   

]]></b:skin>



add below code just above it,



    
.comment-thread ol {
    counter-reset: countcomments;
}

.comment-thread li:before {
    content: counter(countcomments,decimal);
    counter-increment: countcomments;
    float: right;
    font-size: 22px;
    color: #555555;
    padding-left: 10px;
    padding-top: 3px;
    background: url(http://3.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;
}</style>



Now save your template and you are done.



Customizations



    Line Number 11 - Edit it to adjust the position of text(number) from left size

    Line Number 12 - By editing the value you can adjust the position of text(number) inside bubble from top.

    Line Number 13 - If you want to change the bubble image then simply replace image URL with yours.

    Line Number 14 - By editing this value you can adjust the position of bubble from top

    Line Number 15 - Increase or decrease the value as per your requirements





Below I am sharing some comment bubbles,right click on any bubble,select Copy Image URL and replace it with above comment bubble URL in line number 13.








how to blog    blogger blogspot    blogspot blogger, how to blog    widget blogger blogspot    blogs, how to blog     blogspot or blogger, how to blog    tutorials, how to    comments, how to, blogspot blogger    new comment, how to blog    blog design, blogger blogger.com                   bubble comment count, bubble blogger posts   blogger comments, comment count    blogger blogspot, blogger comments   blogger bubble comment count   comments in blogger titles    blogger tips, blogger tricks   blogger widgets, bubble comment count    bubble comment count    Bubble Comment Count    Bubble Comment Count, blogger blogspot                                 - See more at: http://www.helperblogger.com/2012/08/add-numbers-to-blogger-threaded-comments.html#sthash.mliWu4dW.dpuf








how to blog    blogger blogspot    blogspot blogger, how to blog    widget blogger blogspot    blogs, how to blog     blogspot or blogger, how to blog    tutorials, how to    comments, how to, blogspot blogger    new comment, how to blog    blog design, blogger blogger.com                   bubble comment count, bubble blogger posts   blogger comments, comment count    blogger blogspot, blogger comments   blogger bubble comment count   comments in blogger titles    blogger tips, blogger tricks   blogger widgets, bubble comment count    bubble comment count    Bubble Comment Count    Bubble Comment Count, blogger blogspot                                 - See more at: http://www.helperblogger.com/2012/08/add-numbers-to-blogger-threaded-comments.html#sthash.mliWu4dW.dpuf



how to blog    blogger blogspot    blogspot blogger, how to blog    widget blogger blogspot    blogs, how to blog     blogspot or blogger, how to blog    tutorials, how to    comments, how to, blogspot blogger    new comment, how to blog    blog design, blogger blogger.com                   bubble comment count, bubble blogger posts   blogger comments, comment count    blogger blogspot, blogger comments   blogger bubble comment count   comments in blogger titles    blogger tips, blogger tricks   blogger widgets, bubble comment count    bubble comment count    Bubble Comment Count    Bubble Comment Count, blogger blogspot                                





HOPE You Enjoy It........Don't Forget To Leave A comment


Admin
Admin

Posts : 2732
Join date : 2012-06-08

View user profile http://yourforum.americantalk.net

Back to top Go down

View previous topic View next topic Back to top

- Similar topics


 

Permissions in this forum:
You cannot reply to topics in this forum