Tutorial # 35 - Numbered Comments on Threaded Comments for Blogger/Blogspot

This tutorial helps you to understand how to add numbered comments with comment bubbles on the threaded comments as shown in the picture below:

This will help you to specify any comment using its 'reference' number.

Step 1: From your Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2: Click anywhere inside the code area and press the CTRL + F keys to open the Blogger's search box. Type ]]></b:skin> inside the search box then hit Enter to find it.

Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3: Just above ]]></b:skin>, add the following CSS code:

	.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;
	}

view raw gistfile1.txt hosted with ❤ by GitHub

- If you want to have no bubble icon, remove lines # 12-18.

- To change the comment bubble, replace the URL with the URL address of your own icon. [URL address of bubble/icon will be made by inserting it somewhere in your blog and then right-click on it and click on "Copy image address". Then the address will be saved in your clipboard which can be used to replace the URL in line # 14 of the above CSS code. After doing so, you may remove the picture inserted.]

- To change the position of comments count, increase/decrease the values (10 & 3) from padding-left and padding-top in lines # 12 and 13 respectively

- To change the position of comments bubble/icon, change the values (7 & 10) from margin-top and margin-left in lines # 15 and 16 respectively.

- To change the font and color of the comments count, change the values in lines # 10, 11 and lines # 27, 28.

Step 4: Now Save the Template and you're finished!