What the following CSS trick will do for you:
- When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1.
- Then, each time the code flow goes through a review of any level, either a principal or a reply comment (.comment-thread li), content will bring us in front (:before) of the body of the comment, the number that is the counter at the time.
- Then is incremented in one unit the counter (counter-increment).
Isn't that great? Well, i'm pretty sure many of you have been waiting for this cool trick. So let's begin applying it for our threaded comments system.
Steps to add bubble comments count
Step 1: Go to Dashboard - Template - Edit HTML (click on Proceed if needed)
...Expand Widget Templates:
Step 2: Search (CTRL + F) for this piece of code:
]]>
Step 3: Add the following code just above it:
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAU9J206f_TuL0BVkPvptj-BUuUU6qEN0kcKuo815uYxDInPCXFVeD_Kdb48-IotZgbjCKNcjMgaXhiuPnLFvBVHFiG_i1Fqu0dZkVwJfhQiEP5-OWBUgUONv0vJ9JlruWM8tuQukSMlLR/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;
}
- for no bubble icon, remove the code in red (including the blue code)
- to change the comment bubble, replace the code in blue with the URL address of your own icon.
- 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
If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below.
5 SEO Tips To Get Massive Traffic
15/09/2012 - 1 CommentsFirst of all you should kept mind that blogging is all about posting. As much as you post, you will get your…
How To Publish Your Posts To Facebook Page Automatically
24/06/2012 - 0 CommentsFacebook is the best social networking site which is widely used in the world. Every blogger give first…
Blog SEO tags Nofollow Labels - save your blog from SPAM
04/02/2012 - 0 CommentsBlogger Label Links effect your blog or site Page Rank in a negative way and that's a fact. Why follow…
Alternative Lorem Ipsum Generator
19/09/2012 - 0 CommentsQuirky filler text generators is a Alternative Lorem Ipsum Generator to use for quickly add content to…
New On-Page Optimization Website Analysis
21/09/2012 - 0 CommentsIn the SEO process pre optimization site review and analysis is very much important. In case of on-page…
Tips To Choose The Best Niche For Your Blog
16/08/2012 - 0 CommentsIt was very tough to decide on a niche to start a blog. Almost every blogger might have faced this trouble…
Cool Stylish CSS Labels For Blogger
30/09/2013 - 0 CommentsFriends, This is a widget to modify your label to a brick style with CSS effects. It is very effective widget…
How To Replace "Post A Comment" Message In Blogger With Image Or Text
08/10/2013 - 0 CommentsYou can replace post a comment message that appears at your blogger comment box header section with image,…
Random Posts...!!!
Posted in: BloggerBlogspot,Comments,Numbered,threaded
1 comments:
We are a leading digital marketing company in Toronto. Our services include SEO, SMO, Google ads, Facebook ads.
Post a Comment
Please feel free to comment on this topic.