Image Slider By helperblogger.com The slide is a linking image Pure Javascript. No jQuery. No flash. #htmlcaption

How to Add A Comment Count Bubble To Blogger Post Titles

Having a comment count bubble to each blogger post titles makes your blog more attractive. This improves not only your comments count but also allows your visitors to see what are the most popular posts on your blog. If a post has more comments then it will show the popularity of posts to your readers and visitors. So let's start adding this feature to your blog post titles by displaying the total count of the comments for your Blogger posts:

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. Find (CTRL + F) the following piece of code in your template:

]]></b:skin>

Step 3. Place this code just above ]]></b:skin>:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpsJ0W3Gi6Eit11NmqWB5yrzy4v-GUDNi2OwMPleKMNqI62ebZ59BPMbOQ1IwMy12nU-RjoR-8bN0NBUpSEBiGtr2EpnsYQR3oWfegZFliWz4AAX9syV49u4lhOJ4k6S7XSnnoIlEzd_q/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Step 4. Now find the below code:

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

Note: If you can't find it, search this code instead:

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

Step 5. Add this code immediately after it:

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

Note:
- to change the color of the comments number, replace #ffffff with the hex value of your color;
- to change the font size, increase/decrease the 18px value;

Step 6. Now Preview your template and if everything is ok, Save the Template.

You can choose one of these images below (Right click on the desired image and select "Copy Image Address/Location" - paste it instead of the red code from step 3)

bubble comment count, bubble blogger postsblogger comments, comment countblogger blogspot, blogger commentsblogger bubble comment countcomments in blogger titlesblogger tips, blogger tricksblogger widgets, bubble comment countbubble comment countBubble Comment CountBubble Comment Count, blogger blogspot

Enjoy (:

Didn't find what your were looking for? Then you might be interested in this tutorial:
Display post author, date, labels and comments with icons below post titles
Share this article :

+ comments + 3 comments

Anonymous
19 November 2013 at 00:47

Add bubble comments count near your each of you post title can make make your blog more attractive to your visitors.Thanks for great sharing.
website design

5 May 2016 at 10:59

awesome visit http://bursamusik.org

14 April 2018 at 11:45

very nice information and these information is also very useful to you How to create Banner with scrolling using Html in 1 minute

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...
 
Helped By : WWW.KASPERWINDOW.TK | KasperWindowTemplate | Download This Template
Copyright © 2011. TOWARDS HEAVEN - All Rights Reserved
Template Created by Aehtasham Aumee Published by KasperWindow
Proudly powered by Blogger