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.
Facebook Essential SEO: The Leading Social Network
22/09/2012 - 1 CommentsNow these days social media is an important part of search engine optimization and due to huge popularity…
How to Add Custom Robots Tags in Blogger
19/08/2013 - 0 CommentsHow to Add custom Robots Tags in Blogger:- Today I am going to teach you a special SEO related Tutorial…
Best 14 Tips for Facebook Timeline Business Page
23/09/2012 - 0 Comments1. Create a new Facebook timeline cover image. The cover image provides amazing opportunities for…
Why Free Email Marketing is a Great Option for Small Businesses?
11/06/2012 - 1 CommentsTo say that business conditions these days are less than ideal across the board would be a great…
Is Patience is an important part of Seo?
17/09/2012 - 2 CommentsSearch engine optimization is a technique which increases the visibility of websites on search engines. Seo…
Best SEO 5 Responsive Design Blogger Templates
18/08/2013 - 0 CommentsTop 5 Awesome Responsive Blogger Templates:- These days their is a lot more trend of Blogger templates.It…
SEO beginners guide for Blogger - 11 easy steps
02/03/2012 - 2 Comments11 tips to SEO beginners guide for Blogger How SEO can help beginners to guide them through Blogger. In…
Search Box For Blogger
12/09/2013 - 0 CommentsAdd a search engine in the sidebar of your blogger blog. This searches all the posts on your blog, and…
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.