If you want to add a comment or speech bubble to your Blogger blog, then follow the next steps below:
Step 1. Log in to your Blogger Dashboard > go to Template > click the Edit HTML button
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3. Find the following tag in your template:
]]></b:skin>Note: before anything, you need to click on the small arrow next to it and after the code has expanded, search for the ]]></b:skin> tag again
Step 4. Just above ]]></b:skin> add the following CSS styling:
.comment-bubble {Step 5. Now find this code:
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbns7wPfve87NP0z7A3_9jpyWFS8cBoM6rGojTIXDrr9Y-r3iMb00zj7bmC3864QDPjpyZ-sIt5IGdBHRz2x9PXEynfivmlksOx-3bg9NkfrcTMjq6416e80CIRHVtrRKkVAisfVV8I3i7/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
<b:if cond='data:post.title'>Note: If you can't find it, search this code instead:
<h3 class='post-title entry-title'>
<b:if cond='data:post.title'>Step 6. And add this code immediately after it:
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.allowComments'>Note:
<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>
- 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 image you like and select "Copy Image Address/Location", then replace the blue code from step 4 with the address you just copied.
That's it! Enjoy!!! (:
Do you need to add more info on your blog posts? Then I recommend you reading this tutorial:
EmoticonEmoticon