How To Add Numbers To Blogger Threaded Comments
How To Add Numbers To Blogger Threaded Comments
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.
- See more at: http://www.helperblogger.com/2012/08/add-numbers-to-blogger-threaded-comments.html#sthash.mliWu4dW.dpuf
- See more at: http://www.helperblogger.com/2012/08/add-numbers-to-blogger-threaded-comments.html#sthash.mliWu4dW.dpuf
HOPE You Enjoy It........Don't Forget To Leave A comment
Similar topics
» To 10 Cute Blogger Templates
» ModernBlog Blogger Template
» ProFinance Blogger Template
» Stitch Blogger Template
» How To Make Money with Blogger Platform
» ModernBlog Blogger Template
» ProFinance Blogger Template
» Stitch Blogger Template
» How To Make Money with Blogger Platform
Permissions in this forum:
You cannot reply to topics in this forum
|
|
Thu Nov 23, 2017 9:05 pm by Admin
» Binging with Babish: Rachel's Trifle from Friends
Thu Nov 23, 2017 9:01 pm by Admin
» $1,977 Japanese Grapes - About 4 million views in 4 days
Thu Nov 23, 2017 8:58 pm by Admin
» Superman-Batman Vol. 5 [2017]
Thu Nov 23, 2017 8:53 pm by Admin
» BluffTitler Ultimate v13.6.0.2 Multilingual
Thu Nov 23, 2017 8:44 pm by Admin
» Ultra HD 3840×2160 Wallpaper Pack 192
Thu Nov 23, 2017 8:38 pm by Admin
» Weather Station v3.4.8
Thu Nov 23, 2017 8:36 pm by Admin
» Photography Week – 23 November 2017
Thu Nov 23, 2017 8:31 pm by Admin
» CCleaner v1.23.101 [Professional]
Thu Nov 23, 2017 8:23 pm by Admin