How it works?
Like any ordered list, BlogSpot blogs uses the <ol> tag for displaying comments in hierarchal order. Each comment holds a separate <li> tag. The counter-reset Property sets the value to zero as soon as the loop ends and counter-increment property increases the value by one unit depending on the number of li tags used inside the parent loop. Well enough of theory, now its time to implement this effect on your blogs!
Note: This tutorial can also be applied to Wordpress blogs. you just need to change the name of CSS classes to that used by twenty12 theme used by WP engine.
Lets Count Comments in Blogger!
For this tutorial to work you must be using threaded comments in your blogger templates. If you have not yet switched to that then please do so by reading the following tutorial:
- Go to blogger > template
- Backup your template
- Click Edit HTML
- Search for </b:skin>. Click the black arrow to expand the code.
5. Paste the following Styles just above </b:skin>
/*----- Comment Counter by MBT -----*/
.comment-thread ol {
counter-reset: mbt-comments;
}
.comment-thread li:before {
content:counter(mbt-comments);
counter-increment: mbt-comments;
font-size: 30px;
float:left;
position:relative;
top:0px;
left:-10px;
margin-right:0px;
height:100px;
margin-right:0px;
font-weight:bold;
font-family:arial, georgia;
color: #666;
}
.comment-thread ol ol {
counter-reset: mbt-comments-sub;
}.comment-thread li li:before {
content: counter(mbt-comments) "." counter(mbt-comments-sub,lower-latin);
counter-increment:mbt-comments-sub;
font-size: 12px;
color: #666;
position:relative;
top:10px;
}
.comments .comments-content .comment-header, .comments .comments-content .comment-content { margin:0px 0px 8px 28px!important;}
Customization:
- You can adjust the font size and color of comment counts for Main section using the yellow highlighted regions
- To edit the font size and color of sub sections (nested replies) change orange highlighted regions
- lower-latin: Nested replies for first comment are counted in this order 1.a, 1.b, 1.c ... If you wish to display them in roman like 1.I, 1.II, 1.III, 1.IV... then replace lower-latin with Upper-roman, if you wish to display them as integers then change it to decimal. Following are some other styles you can use for nested replies: lower-greek, circle, square, disc, lower-roman
6. Save your template and you are all done!
Visit your blog to see it working just fine! :)
Must Read:
Following are some posts that you would surely like to read:
- 1000+ background patterns for Blogger comment box
- Expand/collapse the comment form
- Facebook comments + blogger comments inside tabs
- Add GooglePlus comments system in blogger
- Much more.. Use our search box!
Need Help?
I just hope this new addition to blogger tricks brings a delightful change to all of you who have been looking for a way to count comments in threaded list. I would really appreciate hearing form you all. Take good care of yourselves buddies. Peace and blessings be upon you all! :)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
5/23/2013
Widgets
Thanks alot this very fancy style for threaded commenting system. we should apply this. Thanks Mohammad Bro.
ReplyDeleteAmazing one ! Thank you and, I have a request, I really need "Popular Series" Widget in your blog, I need the Idea not the look of it, How you make it hidden and then show when we press on "▼", I really need it and Thank you.
ReplyDeleteSir i have again one off topic question please dont mind. i may also place the same comments at similar posts about this but bro we do not get reply from your earlier posts. thats why i am going to mention its here.
ReplyDeleteSir can you guide me i am little confused about this two selectors. thats what is the different between # and . (dot) in Css. we mostly see thats in template sometime gadget style is beginning # and sometime it with . like #mbt or .mbt or look at below
1
.selector {
background-color:red;
property:value;
}
2
#selector {
background-color:red;
property:value;
}
so i thinks its differentiate like this.
# is an id selector, used to target a single specific element with a unique id, but . is a class selector used to target multiple elements with a particular class. To put it another way:
#foo {} will style the single element declared with an attribute id="foo"
.foo {} will style all elements with an attribute class="foo" (you can have multiple classes assigned to an element too, just separate them with spaces, e.g. class="foo bar")
The # means that it matches the id of an element. The . signifies the class name:
The dot signifies a class name while the # signifies an element with a specific id attribute. The class will apply to any element decorated with that particular class, while the # style will only apply to the element with that particular id.
1 Please clear me and give suitable examples. please sir throw my confusion.give exmple
2 Also mentions me when we need to put # and when we need to put .
This is a unique style of blogger threaded comments. Thanks Mohammad! :)
ReplyDeleteMustafa it is just outstanding, Thanks for sharing
ReplyDeleteIt's very nice and outstanding...thanks for sharing this with us !
ReplyDeleteThanks bro Mustafa for sharing this awesome tricks.
ReplyDeleteGreat tips mustafa..
ReplyDeleteThis is an innovative way for threaded commenting system. This will surely help to improve our blog visibility.
@Hafeez KhanID Selector(#) is used to specify a style for a single and unique element. The ID selector uses the ID attribute of the HTML element.
ReplyDeleteClass selector(.) is used to specfiy a style for a group of elements.Unlike the ID Selector, the class selector is most often used on several elements.It allows you to set a particular style on many html elements having the same class.
So as a whole, you can note that class selector(.)is used where we want to use with more than one elements whereas we use # for single elements.Hope it helps....Let me know, if you have any other query... Sorry i failed to give you any example because the commenting system only allows few html tag and it was extremely difficult to provide you a good example with these html codes.
However it would be great to see the reply from mustafa bhai...I am also waiting for the reply..
Miustafa bro is back with his awesomeness.. Cool!
ReplyDeleteGreat sharing bro. I always like to visit your blog for unique tips and tricks so that I can apply them on my blog. Keep it up.
waw keren,...sipp,berkunjung brooo,commback.
ReplyDelete@Ravi Kumar
ReplyDeleteThanks Ravi Brother for your kindly reply. Bro Actually i knew thats you have mentioned i also place the same examples above. But there is somethings missing. i will show thats by examples. there is a short story behinds this. i will mentioned different examples with different logic. we will soon published thats on your blog. Discuss you there bro.
Thanks Mohammad brother, I really loved this unique threaded comments for blogger. I'm gonna try this out on my new blog TechFriki.com
ReplyDeleteThis comment has been removed by the author.
ReplyDelete@محمود منير
ReplyDeleteBrother I created it using accordion effect. Ok I will surely share its code. I never thought I can write a tutorial on it also. :P
@Hafeez
I truly respect such comments dear. Feel free to ask them.:)
You gave a great example yourself! :p
Budding normally in web programming we identify a HTML object using the hash (#) symbol, so that effects can be applied to that particular portion using its ID variable.
You can style a HTML element using either ID selector or Class selector. We use ID's mostly when we also need to program a certain section.
The only difference between them is their usage.ID and CLass selectors are called differently in HTML.
For example If a link inside Posts has a Class selector then I will style it using this code:
.Samplelink {
---
---
---
}
and I will call its styles inside it using this HTML code:
<a href="Link URL" class="SampleLink >Link Text </a>
But if the same link is styled using Id then I will use this approach:
#Samplelink {
---
---
---
}
and I will style its HTML code using an ID:
<a href="Link URL" id="SampleLink >Link Text </a>
Both will give same results
-----
The only difference between them is that Class selectors are only used for design purposes but ID selectors can even be used as variables inside a programming language.
Since Widgets are often programmed using javascript therefore we different them from each other using ID's.
Hope this helps :)
@Ravi
ReplyDeleteI love it when you guys help one another and your explanation was truly correct from a designer perspective.
hey Mohammad ,
DeleteHow can I get the link in post from homepage ? Is there any way ? I have seen many blogger templates sharing sites like btemplates4u_com .. designcart_org doing so ? Please let me know the same method
Thanks
@rAJ
DeleteCould you please explain your question a bit. Do you mean Cutting the title string? Shortening the title on homepage?
Assalam walekum Bhai,
ReplyDeleteI want a big help...
what can I do in salahuddin ayubi theme for incresing traffic.
please reply
This was exactly what I have been trying to do! Thanks for posting!
ReplyDeletehttp://bakedbyleonardo.blogspot.com