Numbered comments on threaded comments for Blogger/Blogspot

In a past tutorial, I've been talking about how you can add numbered comments to your blogger blog and today we'll learn how we can add numbered comments along with comment bubbles on the threaded comments as well.

What the following CSS trick will do for you:

1. When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1. 
2. Then, each time the code flow goes through a review of any level, either a principal or a reply comment (.comment-thread li), content will bring us in front (:before) of the body of the comment, the number that is the counter at the time.
   
3. Then is incremented in one unit the counter (counter-increment).

See the screenshot:

Isn't that great? Well, i'm pretty sure many of you have been waiting for this cool trick. So let's begin applying it for our threaded comments system.

Steps to add bubble comments count

Step 1: Go to Dashboard - Template - Edit HTML (click on Proceed if needed)

...Expand Widget Templates:

Step 2: Search (CTRL + F) for this piece of code:

]]>

Step 3: Add the following code just above it:

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAU9J206f_TuL0BVkPvptj-BUuUU6qEN0kcKuo815uYxDInPCXFVeD_Kdb48-IotZgbjCKNcjMgaXhiuPnLFvBVHFiG_i1Fqu0dZkVwJfhQiEP5-OWBUgUONv0vJ9JlruWM8tuQukSMlLR/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;
}

Note:

• for no bubble icon, remove the code in red (including the blue code)
• to change the comment bubble, replace the code in blue with the URL address of your own icon.
• to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
• to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top

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

If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below.

Read more »

Verified Fb Page tick mark 4 Blogger Author Comments

Do you noticed a tick mark in some Facebook Pages like Actors, Political Leaders. Verified mark is only available for Worldwide stuff like big companies, Actors such have the chance to be faked.

When we move mouse over that tick, it shows a "Verified Page" message. Do you wish to add that verified tick mark to  your (Author/Admin) comment in your blog. Here I am going to show you how to add Facebook verified Page mark to Admin comments.

Add Facebook verified Page tick to Author Comments

• Sign In to Blogger Dashboard
• Go to Template  -> Edit HTML
• Find .comments .comments-content .icon.blog-author and delete the following code inside it

background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);

• And copy the following code inside it

background: url("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;

• Final code looks like the following

.comments .comments-content .icon.blog-author {

    background: url("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;

}

I hope this article will help you to customize your admin comment. Please Like and Share.

Read more »

How to Add Profile Images to Blogger Comments

Today I will show you how easy it is to have Blogger (Blogspot) display profile images in the embedded comments section of your blog even if you are using a custom template.

About a month ago Blogger announced that it was enabling profile images (profile avatars) in the embedded comments section on Blogger (Blogspot) as part of its 10th birthday feature series. The new profile image feature which has been available on other commenting options has now been extended to the embedded comments option. This is good news if you are using a default template as you will now see a small avatar next to your visitors comments and your own avatar if you have uploaded a profile image.



Default Blogger Templates - Enabling Profile Images
Profile images work on default Blogger templates and have been automatically enabled by Blogger. If you are using a default Blogger template with embedded comments enabled and have recent comments on a post you will see a profile image to the left of visitor comments (provided they have uploaded one that is). Your profile avatar will also display when you respond to visitor comments again provided you have uploaded one. (To upload your profile photo click on Add Photo at the Dashboard). If profile images are not displayed enable them by going to Settings > Comments and checking the Yes radio button at the bottom of the page which says Profile Images Enabled.

Custom Blogger Templates - Enabling Profile Images
If you are using a custom template you may still be able to see profile images in your embedded comments section. Check out Settings > Comments to make sure Profile Images are enabled. If you can't see profile images you can still add this feature by tweaking your Blogger template. Follow the instructions below to have Blogger display profile images in the embedded comments section of your custom Blogger template.

Add Profile Images to Comments Section of a Custom Blogger Template
If you are using a custom Blogger template you can use the following method to add profile images to the embedded comments section of your Blogger template.

1. Login to Blogger if not already logged in
   
2. Go to Design > Edit HTML
   
3. Back up your Blogger template as a precaution by downloading the full template to your computer
   
4. Expand Widget Templates by checking the box on the right hand side.
   
5. Find the following line in your Blogger template by using CTRL + F:

<dl id='comments-block'>

6. Change the above line to the following:
   

   <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
   

7. Scroll down a few lines and find the following line in your Blogger template:
   

   <a expr:name='data:comment.anchorName'/>

8. Directly before the above line paste the following code block:
   

   <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
   </b:if>
   <a expr:name='data:comment.anchorName'/>
   <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
   </b:if>
   

9. Click Save Template
   
10. Click View Blog and navigate to a page with commenting to see avatars next to comments in the embedded comments area

Tips and Troubleshooting

• If you have added the author commenting highlight hack to your Blogger template there will be 2 instances of the code at Step 7 to change
  
• If your template does not have the code mentioned in Step 5 and Step 6 check that dl has not be replaced by div. In this case leave the div as is and replace the rest of the code in the line.
  
• Blogger has only enabled profile images for Blogger and Google profiles so if your visitors comment using identities such as "Anonymous" or "Name/URL" their image profile will not be displayed. If OpenID, AIM or other identities are used these favicons will be displayed instead.
  
• Profile avatars load last so they will not prevent visitors viewing your content if you have a lot of comments on some pages

In today's Blogger tutorial (Blogspot tutorial) you have learned how to enable profile images in the embedded comments section in Blogger. If you are using a default Blogger template this can be achieved by enabling profile avatars in your Blogger template. If you are using a third party custom template I have shown you a Blogger hack that will display profile images next to comments on your blog. As always I am interested in how you get on with this tweak. Good luck!

Read more »

How to Add a Comments Counter Button to Blogger Blogspot

In this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger (Blogspot) to show off the number of comments each of your posts has received.

A comment counter button (bubble) will have the effect of encouraging visitors to comment on your Blogger blog and also help to highlight the credibility of your articles.


Installing this Blogger hack to add a comment counter button only takes a few minutes. The changes needed to add the comment bubble to Blogger while not difficult do involve adding a small snippet of code to your Blogger template in two places. For this reason I strongly urge you to back up your Blogger template before attempting this blogger hack.

Blogger Tutorial Difficulty - easy to medium

How to Add a Comments Counter Bubble to Blogger
A Step-by-Step Walkthrough
The following steps will insert a fully clickable comments counter button on the same line as the post title in Blogger. The comments counter is right aligned by default.

1. Log in to Blogger and the blog you wish to apply these changes to
   
   
2. Select Design > Edit HTML
   
   
3. Click on Download Full Template to back up your template before you make any changes
   
   
4. Check the Expand Widget Templates box
   
   
5. In the CSS Styling section of your Blogger template and just before the ]]></b:skin>
   
   

   .comments-button {
   width : 48px;
   height : 48px;
   background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTCIn7W0Qt8kwCV9PGbumEqCBtVinyVseXtKPwBLkSz-575192hzk6_Z6kr8jV2nJtKlAhXRfaUVQgKcm6fJZQx1orN7WB9vrVDepyob18cs4eWV6WoCosNT3oviuJ2BUoqs-aYxHjWYEo/s200/comment-counter-bubble.png) no-repeat;
   float : right;
   font-size : 18px;
   margin-top : -15px;
   margin-right : 2px;
   text-align : center;
   padding-top:10px;
   }

   
   
6. Now find the following block of code using CTRL key + F
   
   

   <b:includable id='post' var='post'>
   <div class='post hentry uncustomized-post-template'>
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>

   
   
7. Copy this code block:
   
   

   <b:if cond='data:post.allowComments'>
   <a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>

   
   
8. Insert as follows:
   
   

   <b:includable id='post' var='post'>
   <div class='post hentry uncustomized-post-template'>
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.allowComments'>
   <a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>

   
   
9. Save template and then view blog to admire your new comment counter badge.

Tips and Troubleshooting

1. If you prefer you can replace the button image I have provided with your own image. You can find other buttons easily enough by doing a Google search with a term like "speech button icons".
   
   Upload your button to a hosting service such as Photobucket and change the URL address of the image in the CSS styling section. The following example will render a smaller blue button. Note I have reduced the font size to accommodate the change. You may need to play around with the settings to get the font sizing right for your image.
   
   

   .comments-button {
   width : 48px;
   height : 48px;
   background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBzI52tG8-Plt5l_8fiEdk4u3PjIcY6kmaC2dicUK6bVnsWlSFp89g18r85ypAaWK_KHpfXFyaSy2tN4ZEOw9Iqjj-5nwsElCdWCSAXcTw7CzcoMk7ydYn5aOJnGxdyGQYi1y4ZI4KR3Q8/s200/comment-counter-bubble-2.png) no-repeat;
   float : right;
   font-size : 14px;
   margin-top : -15px;
   margin-right : 2px;
   text-align : center;
   padding-top:10px;
   }

   
   
   
2. If you want your comment counter to be left aligned instead of right you will need to change the CSS styling from float:right; to float:left;

Covered today how to add a comments counter to a Blogger blog (blogspot blog) that will appear to the right of your blog post title. A comments counter is a way to encourage visitors to comment and is a way of showing off the credibility of your blog posts. Good luck!

Read more »