How To Add Together A Comment Count Bubble To Blogger Postal Service Titles

A comment bubble (or speech balloon) amongst the electrical flow release of comments displayed on each blogger postal service titles mightiness survive an first-class improver if yous desire to brand your weblog to a greater extent than attractive together with engaging. Having a comment bubble icon could aid yous non exclusively to get to a greater extent than comments on your blog but may, every bit well, laissez passer on your visitors a hint most which are the most pop posts on your blog. When a postal service has received many comments, it could reverberate the popularity of your posts together with thus, brand your readers together with visitors to survive to a greater extent than interested inwards reading them.
If yous desire to add a comment or vocalism communication bubble to your Blogger blog, together with so follow the side past times side steps below:

Step 1. Log inwards to your Blogger Dashboard > larn to Template > click the Edit HTML button

Step 2. Click anywhere within the code expanse together with press the CTRL + F keys to opened upward the Blogger search box

Step 3. Find the next tag inwards your template:

]]></b:skin>

Note: earlier anything, yous take away to click on the small-scale arrow side past times side to it together with afterwards the code has expanded, search for the ]]></b:skin> tag again

Step 4. Just to a higher house ]]></b:skin> add together the next CSS styling:

.comment-bubble {
float : right;
width : 48px;
elevation : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8lL9WO4K1L3Tu7-WVdijJrvMx0W6Yk1GNMwpxrNS1N7mVakNbr48cThqPnZ7E0w5y4QR3UWE_zb2hP4Odzudr-67tIJS2plBUOovFAn2qRMM6rcJomxyUmyBieayKYiJiA_avyarzsr0b/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Step 5. Now discovery this code:

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

Note: If yous can't discovery it, search this code instead:

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

Step 6. And add together this code instantly afterwards 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 alter the color of the comments number, supersede #ffffff with the hex value of your color;
• to alter the font size, increase/decrease the 18px value;

Step 7. Preview your template together with if everything is ok, click on Save Template.

Comment Bubbles 

You tin pick out i of the images below - correct click on the ikon yous similar together with select "Copy Image Address/Location", together with so supersede the bluish code from footstep four amongst the address yous only copied.




That's it! Enjoy!!! (:

Do yous take away to add together to a greater extent than information on your weblog posts? Then I recommend yous reading this tutorial:

Display postal service author, date, labels together with comments amongst icons below postal service titles

Share this post