HOW TO ADD COMMENTS COUNTER BUBBLE TO GOOGLE BLOGGER

BLOGGER NEED TO SEE THE VISITOR COMMENTS OF HIS BLOG. AND ALL VISITOR CAN SEE THAT HOW MANY VISITOR AL READY POST COMMENTS ABOUT THE POST. GOOGLE BLOGGER  NEED TO CHANGE SOME CODING IN HIS BLOGSPOT BLOG TEMPLATE TO SHOW COMMENTS BUBBLE ON HIS BLOG POST. HERE I’ LL SHOW YOU HOW TO ADD A COMMENTS BUTTON ON BLOG POST. 

1. LOG IN BLOGGER DASHBOARD :

2. CLICK ON DESIGN :

3. CLICK ON EDIT HTML:

4.TO SAFE YOUR BLOG FROM ANY UNWANTED MODIFICATION, PLEASE BACK UP  YOUR BLOG BEFORE CHANGE IT.

5. TO ADD LIKE ABOVE COMMENTS BUBBLE, CAREFULLY READ AND FOLLOW INSTRUCTION GIVEN BELOW:

6.CHECK THE ‘EXPAND WIDGET TEMPLATES BOX’

7. FIND  THESE CODE IN CSS SECTION:

]]></b:skin>

8. BEFORE ABOVE CODE PASTE THE FOLLOWING CODE:

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

 

 9. NOW FIND THE FOLLOWING CODE:

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

10. PASTE THE FOLLOWING CODE AFTER ABOVE CODE:

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

11. NOW SAVE THE TEMPLATE.

Related Posts:

Related Posts for blogger