Tuesday, 29 October 2013

How To Add A Comment Count Bubble To Blogger Post Titles?



How To Add A Comment Count Bubble To Blogger Post Titles?


On this post of How To Add A Comment Count Bubble To Blogger Post Titles



1. Go to Dashboard - Template - Edit HTML (click on Proceed button, if needed)



2. Select Expand Widget Template (make a backup)



3. Find - using CTRL + F - the following piece of code in your template



4. Add the below code just above




.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://2.bp.blogspot.com/-7FFIKA34Kvw/T4x9E0RmA0I/
AAAAAAAAALI/03AG305CesI/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
 5. Now find this 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'>


6. And 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

Comment Bubbles

You can choose one of the images below - right click on the desired image and select Copy Image Address/Location, then replace the red code from step 3 with the address you just copied.



That's it Enjoy