Numbered comments on threaded comments for Blogger/Blogspot alphause

Po ... Numbered comments on threaded comments for Blogger/Blogspot 56 comments In a previous tutorialyou'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 calledcountcommentsactivates 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: 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 toTemplateand click on theEdit HTMLbutton: ... 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: ]]>Note. you have to click on the arrow next to it, then search the]]>one more time Step 3:Add the following code just above]]>: .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 thecode in red(including the address in blue) to change the comment bubble, replace thecode in bluewith 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 hereand here) to change the position of comments count, increase/decrease the values (3 & 10) frompadding-topandpadding-left to change the position of comments bubble/icon, change the values (10 & 7) frommargin-leftandmargin-topStep 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. Like 4 Random Posts Blogger Auto Video Template by webbilgi08/04/2012 - 30 Comments 4 Different Styles For the Popular Posts Widget20/09/2013 - 17 Comments Add floating social media sharing buttons below Blogger post titles20/02/2014 - 1 Comments Related Posts: What is the difference between padd... How to Use Cookies in Javascript Numbered comments on threaded comme... How To Remove Blogger Threaded Comm... How to Add Numbered Page Navigation... 56 comments: Blogger Tricks 6/05/2012 nice tip Reply Flo @ Butterfly Quilting 6/14/2012 thank you SOOOOOOO much! This was so easy and worked like a charm! Reply Judith 6/21/2012 This is a fantastic tutorial and so quick and easy. Thank you Reply Replies Desperately Seeking Code 6/29/2012 Hi, just wanted to check out the thread format. Desperately Seeking Code 6/29/2012 And find out what happens when you reply to a reply. Desperately Seeking Code 6/29/2012 Thanks for the tips! rachael 6/22/2012 thank you!!! worked perfectly. Reply Sarah @ Just The Bees Knees 7/05/2012 Awesome tutorial! Worked like a charm. Thanks so much!! Reply Nsetips 7/12/2012 Must say that you have an easy technique for integration which is producing good commenting system. Can you tell some good system which do not take much time as disqus commenting system takes a lot of time to load. Reply Motor News 7/22/2012 thank you!! Reply Tip Garden 7/31/2012 Finally found you after accidently trying your instructions for the older blogger, this one worked like a charm! It was easy and I am pretty clueless! Thanks again! I'm about to run my first contest and didn't want to count comments for it! Jan @ TipGarden.blogspot.com Reply Wenson 8/09/2012 It looks awesome and is exactly what I want~~ However I have followed your instruction but nothing happened.... may you take a look of my blog and make a guess of what went wrong? Reply Replies Admin 8/09/2012 Hi Wenson, to be honest i have no idea why it doesn't work for you. Could please send me your template at helplogger76@ gmail.com . Thanks Emily 8/29/2012 This was the EASIEST tutorial ever for adding comments!!! Thank you SO SO much! All other tutorials have you adding lines in 4 or more places and then half of the time it doesnt work, this was great! Thanks! Reply DIANA L. 8/31/2012 I really want to do this Igot to the step where it reads make a back up ----- How do I do that I was all ready to go and then I thought I might mess something up Reply abhishek 9/24/2012 superb post , it was really good Reply Jeanne Gwin 9/25/2012 Okay this one worked the comment bubbles are there but all of them are "1". LOL what have I done wrong now? Thank you so much for helping me out here. :) Reply Replies Admin 10/08/2012 I don't know why this is happening to you. I, however, can't see anything implemented on your blog. Sorry for the late reply and if i can help with something, i would suggest you to add the code again and write me back here to take a peek at your blog to see what's wrong - if there is something. Thanks for visiting! abu sittik 9/30/2012 Hi, I have added as you said but It does not work for me. Could you please help me in implementing this in my blog. http://waytobliss.blogspot .in/ Reply Replies Admin 10/08/2012 The steps are very simple, I don't think I can help you more than that. I can see no code added therefore i'm not sure if you have added it or why it wouldn't work for you. However, I would advise you to add it again and see if it works this time. In case it doesn't work, please write me back. Sara 10/03/2012 Since the new interface has offically "kicked-in" this is a DREAM!!! The old javascript method was no longer working and this one is SO EASY! I tested this in Firefox v15, IE9, Chrome v22, Safari v5, and Opera v12 and it works like a charm! It didn't work in IE compatibility mode (IE8 and older), of course but that's ok! THANK YOU SO MUCH!!!!!! Reply Replies Admin 10/08/2012 You're very welcome. Thanks for your feedback! Blog Designer 12/08/2012 Genious css styling! 1/ As @Sara mentioned before, that doesn't work in IExplorer indeed. I tested against ie9 and earlier. Maybe in ie10 new compatibility would be a change. 2/ About some complains that it didn't work for them. Maybe the comment form, in new blogger interface, has to be: |Settings| >> |Posts and comments| >> |Comment Location ->"Embedded"| or they have done some previous alteretions in their comment code section. very nice job! Jin Yong 10/08/2012 Thank you so much for this. It worked perfectly for me. :-) Reply Replies Admin 10/08/2012 I'm glad it worked. Thanks for visiting :) Chris Tanggote 11/06/2012 won't work for me...can you help me doing it... Reply Chris Tanggote 11/08/2012 can you help me how this work for me, i really want this to work, i like this Reply Dustin 11/13/2012 Its good bro! thanks! I love your tutorial its very easy from http://fromhobby2mone y.blogspot.com/ Reply Dede Yusuf Iskandar 11/17/2012 awesome !!1 Reply dimasok 11/22/2012 I can see the icons but I can't click on them.. Reply Val 12/08/2012 Love the look of the speech bubbles. Thanks. Took me a while to work out that Command + F were the find keys for my MacBook Pro Reply Selena Brown 12/08/2012 Wow! It worked so easily. You're Awesome! Reply Jerry King 12/28/2012 Really informative and great post.. Reply Rasna N.D. 12/31/2012 Thanks Admin, I got it worked on me...:) Reply nas 1/02/2013 thank so much for ur help! but may I know, how I dont want for example 12.a, 17.b etc... I want it counts all comments into number only for example 12,13,14 etc.. sorry with my broken english Reply Michelle (sf9erfan) 1/04/2013 I was able to get this to work for me for the first 200 comments, but can't figure out how to access the next pages of comments. Any tips? Reply Trusted Amazon Store 2/05/2013 Okay this one worked the comment bubbles are there but all of them are "1". LOL what have I done wrong now? Thank you so much for helping me out here. Reply Trusted Amazon Store 2/05/2013 Thank you so much for this. It worked perfectly for me. :-) Reply Localiza Recursos Sociales en el Municipio de Oviedo 2/11/2013 Hola: No me ha funcionado.Quiero implementar http://1.bp.blogspot.com /-g34ZwqIE7bw /T4yBJMyKrDI /AAAAAAAAB2g/fz0Ilonq- pA/s1600 /text_comment_bubble _comments.png y no sé por que debo sustituirlo Puede ayudarme? Pongo el codigo como dice y no sale nada Reply FileXOne 2/13/2013 Really Helped me alot Thanks for the tutorial. :) Reply Tressa S 2/18/2013 Didn't work for me either and I tried both ways (the non-threaded comments and threaded). I have the new blogger simple template. Do I have to change any of the other options on blogger for this to work? Here's my blog: http://tressaswishful endings.blogspot.com Reply Afiullah 2/19/2013 Nice Tip. Reply Giulia Cimitan 3/20/2013 Nice tip, thanks for sharing, I'm definitely using it in my new template :) Reply Giulia Cimitan 3/20/2013 Hi, sorry for bothering, I thought it worked well but then I realized all comments are numbered as 1...Do you happen to have an advice? http://bricioleepuntini .blogspot.it/ (still a template under construction, as you see). Thanks in advance Giulia Reply Replies Admin 3/20/2013 Hi Giulia, Delete the code that you have already added from ]]> and add it just above the tag - it should be put between these tags If it still doesn't work, please make a backup of your template and send it to this email: helplogger76@ gmail.com Thanks Giulia Cimitan 3/24/2013 This worked :) thanks a lot for both sharing and helping! Brent W 4/04/2013 Thanks..Work fine in Firefox but Numbered Comments doesn't show up in IE9..How to fix? Reply Blair Turner 9/23/2013 THANK YOU! I searched for ages for an updated tutorial on how to do this - this one looked the most up-to-date and it worked perfectly. One Lesson at a Time Reply Lorna McMahon 11/24/2013 Could you please help me? I tried following this tutorial and now my blog has duplicate identical comment sections on every blog post. And they still aren't numbered. I would appreciate any advice you could give me to fix my problem. Thanks! Reply clicksomemore 12/29/2013 Hi, Please add this line above ]]> : .comments .comments-content .comment {font-size: 13px;} Change the 13px value to make the font bigger/smaller. I hope this will work for you. Your are star...it worked.have a look http://clicksomemore.blog spot.com/2013/12/good- morning- folks.html?showComment= 1388352730635#c617626 3991028641025 Thank you so much...will never stop visiting your blog for more updates and tricks Happy new year in advance! Reply Replies Admin 12/29/2013 You're welcome ^_^ clicksomemore 12/30/2013 One more thing, how to disable admin from listed as top commentor as i have to reply some comments and i will always be the top commentor .I dont want this coz Im planning to give a small gift to a winner on monthly basis starting Jan 2014. Pls help Reply Replies Admin 1/01/2014 Edit the Top Commenters widget and search (CTRL + F) for the "someotherusertoexclude" text, then replace it with your username or any other that you want to exclude. Muh Yusuf Natsir 12/30/2013 perfect. but how can I add a "author" tet to my comment? thanks Reply Replies Admin 1/01/2014 Add this above ]]> .blog-author:after{ content:"Author"; color: #1982D1; background:#F2F2F2; padding: 5px; margin-left: 5px; } .icon.blog-author:after{content:none;} To change the text color replace the #1982D1; value and to change the background color, change the #F2F2F2; value. Hope this helps. Kaarunya :) 1/23/2014 Wow!!!Thanq so much :) It worked perfectly :) I have one doubt though I want my numbers to be numbered in a different font from my page. But when I include font: Georgia its over ridden by the default one... Do u know how to sort that out? Reply next