In the last tutorial i showed you how you can add a comment bubble to blogger posts titles. But this Blogger hack will add numbers with a cool speech bubble in all the comments in your blog. Each number will be linked to that comment so that you & your readers can use these numbers and corresponding links to mention or point a particular comment on any of your posts.
This works only with previous blogger commenting system, therefore if you want to add this hack, you should first remove Blogger threaded comments. Learn here How to remove Blogger threaded comments
UPDATE! Now you can add comment bubble to your threaded comments too. Please read this post: Numbered Comments On Threaded Comments for Blogger/Blogspot
So let's start adding numbered comments on our Blogger/Blogspot blog
Step 1.
If you are using the old Blogger interface:
If you are using the new Blogger interface:
Step 2. Now find (CTRL+F) this code in the template:
Step 3. Immediately above/before that, paste this code:
Step 4. Now find this code:
Step 5. And immediately below/after it, paste this code:
Step 6. Find (CTRL+F) this code in the template:
Step 7. And immediately above/before it, paste this code:
Settings:
To change the image, edit the red code above
To change the color of the numbers, edit the code in blue
Images you may use (right-click on the desired image and select "Copy Image Address/Location"):
IMPORTANT: You may use any image instead of the one linked in the code above (STEP 7), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.
Step 8. Finally save the template... and enjoy your comments :]
In the last tutorial i showed you how you can add a comment bubble to blogger posts titles. But this Blogger hack will add numbers with a cool speech bubble in all the comments in your blog. Each number will be linked to that comment so that you & your readers can use these numbers and corresponding links to mention or point a particular comment on any of your posts.
UPDATE! Now you can add comment bubble to your threaded comments too. Please read this post: Numbered Comments On Threaded Comments for Blogger/Blogspot
So let's start adding numbered comments on our Blogger/Blogspot blog
Step 1.
If you are using the old Blogger interface:
- Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
- Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Now find (CTRL+F) this code in the template:
Step 3. Immediately above/before that, paste this code:
Step 4. Now find this code:
Step 5. And immediately below/after it, paste this code:
Step 6. Find (CTRL+F) this code in the template:
Step 7. And immediately above/before it, paste this code:
Settings:
To change the image, edit the red code above
To change the color of the numbers, edit the code in blue
Images you may use (right-click on the desired image and select "Copy Image Address/Location"):
IMPORTANT: You may use any image instead of the one linked in the code above (STEP 7), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.
Step 8. Finally save the template... and enjoy your comments :]
UPDATE! Now you can add comment bubble to your threaded comments too. Please read this post: Numbered Comments On Threaded Comments for Blogger/Blogspot
So let's start adding numbered comments on our Blogger/Blogspot blog
Step 1.
If you are using the old Blogger interface:
- Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
- Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Now find (CTRL+F) this code in the template:
Step 3. Immediately above/before that, paste this code:
Step 4. Now find this code:
Step 5. And immediately below/after it, paste this code:
Step 6. Find (CTRL+F) this code in the template:
Step 7. And immediately above/before it, paste this code:
Settings:
To change the image, edit the red code above
To change the color of the numbers, edit the code in blue
Images you may use (right-click on the desired image and select "Copy Image Address/Location"):
IMPORTANT: You may use any image instead of the one linked in the code above (STEP 7), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.
Step 8. Finally save the template... and enjoy your comments :]
by Jillur Rahman
Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
Follow him @ Twitter | Facebook | Google Plus
No Comment