Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

Download our app on Google Play Store

Sunday, April 14, 2013

Add Comment Count Bubble Next To Post Titles On Blogger

Add Comment Count Bubble Next To Post Titles On BloggerThe addition of comments counter to your entries on Blogger is inevitably distinctive, especially if this counter is a constant button appears next to the title. Why? because it is easier to identify the number of comments in each post without having to browse them. It also helps to distinguish between visitors postings active than others, where the post are active when it includes more comments, which indicates that it important and includes valuable information.
In addition to this and that, you’ll add a touch of magic when installed this property to your blog.

How to add this in Blogger

  • Go to Blogger.com » Dashboard » Template » Edit HTML » Expand Widget Template.
  • Just don't forget to make a back up for your template.
  • Using search for (CTRL + F) the following code :

]]></b:skin>

Copy and past the below code just above  ]]></b:skin>

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://3.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Next Find this code :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Or this one :

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>

Now just below it add the following code :

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

Settings:

change the comments number color by replacing #ffffff with the color you want you can get colors codes from this tool.
To change the size font just replace 18 with size you like.

If you want to change the image that appears on the counter, just change this link http://3.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png.


Hope you like this tutorial, waiting for your comments, feel free to ask, or just to say thanks or hello :).
Like the Post? Share with your Friends:-

Team SB
Posted By: Team SB
Comment Using

Comment Policy : We’re enthusiastic to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

14 comments :

  1. Replies
    1. You are welcome, keep visiting this Blog, you'll enjoy with us.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. Hi, I already have this feature on my blog (blogger platform) but when integrating Google+ comments they don't appear in count bubble...any ideas for code alteration to incorporate Google+ comments too?
    www.practicaleverafter.blogspot.com

    ReplyDelete
    Replies
    1. Just change the blog template into an other responsive template and it will work, if you need blogger templates here are some:

      7 PRO AND AWESOME BLOGGER TEMPLATES 2013
      ELEGANT IMAGES TEMPLATES FOR BLOGGER 2013 AND 2014

      Delete
  5. Wow wonderful tutorial and your guidance is superb.....I like to do that type of changes in my blog also. I hope it also effects my ranking somewhere. Thanks for sharing such an helpful information here.
    web designing services

    ReplyDelete
  6. I like to do that type of changes in my blog also Pertandingan Bola . I hope it also effects my ranking somewhere...!!

    ReplyDelete
  7. Do you use the same code, just different placement if you want to add the count bubble at the bottom of each post next to where it says "comments"?

    ReplyDelete
  8. dear, can you tell me how to add comment counter in post header if I also installed diqus,
    because this method is not working when disqus installed...
    Regards: Tips and Tricks, PDF stuff

    ReplyDelete
  9. just wanted to share this http://www.androidtipster.com/google-play-store-app/

    ReplyDelete

Download our app on Google Play Store

Contact Us

Name

Email *

Message *

 
Copyright © . Skill Blogger . All Rights Reserved.
Designed by :- Way2themes