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:

- 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!