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 :]
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:
- 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:
<b:loop values='data:post.comments' var='comment'>
Step 3. Immediately above/before that, paste this code:
<script type='text/javascript'>var CommentsCounter=0;</script>
Step 4. Now find this code:
<data:commentPostedByMsg/>
Step 5. And immediately below/after it, paste this code:
<!--comments-count-starts-->
<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--comments-count-stops-->
Step 6. Find (CTRL+F) this code in the template:
</head>
Step 7. And immediately above/before it, paste this code:
<!-- comments-count-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEium0Pw4qlKANalhGf-80MAJqwmFHTuDX85bvke2-vup7qkYoly9Z2WN_sU7w4i0OSNDlygQljADzWYtFv5CJzMiwpHkB_DvdgbeKLeNlHSucvhpu-9S3x0yh1ArvmBRK1qHFJ3Kzg1TpjQ/s1600/comment+bubble+1.png) no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
}
</style>
<!-- comments-count-stops-http://helplogger.blogspot.com-->
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 :]
0 comments:
Post a Comment