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/AVvXsEhm5I-VmCdRc7Aby9W5HbclmpDz70jeReiUeWYjZKtOriz49DuXOvTMrFUzvy3zhWiFwNfnchWNQsJcpGrQUTd-Ep8ggQlezP_JOk7MGFISpcooXwtlAsa1BrOUfz8WrJ-G1-yXjLF1bcBM/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.
![how to add bubble comment count bubble comment count, bubble blogger posts](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBwby_fP1MGi-E2rA3fBV1R1GEpcEoUTmBVYWqYUaIdc8sIMz0nvhX_fqZ17DhdGIhX6l9KCFn3ieHWqiDNY2c_ZLOkKZ_fc7Bjo-_npNslRZZdOdjgL9pnEBwW2kVCAJhNDjUF3JVwSa-/s1600/4.png)
![How to add Bubble Comment Count blogger comments, comment count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikzeKwz35gXu9FqWHT3PNHWpqmqlRXTwav45yBOR0s6yo0bomD6V1TKqLpSdwg8aw5i1JipvhlIBOffKYAM-aGMBkghNMqPXqsxnHbWosPJl3b-j3aE4sPpkgfBjc7p6LiZwZLW7Aj400K/s1600/2.png)
![How to add Bubble Comment Count blogger blogspot, blogger comments](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpJnlSIdSqVccman4p62Gs6QRSbbT1-3ZMVzmVNT8lct2PoFT-2624vHEDf8Ajrar2Bj3RXtGGUlC8F-9ZwYwru2MkPB4FLppRFFDlTdBcW3V3I3t9sKJRQ4b03jRtsQ3e-AgDumGbakKB/s1600/3.png)
![How to add Bubble Comment Count blogger bubble comment count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMt4gfvaWZcMnfx4Z5Ju8TMTOoShgaCgMXopUs45hFPzoN_kUmzU5vpznsQvoEnciYVsRlC-ZtiX8Hp5-Uh0DRuZo-CCj2f0Ypo8BGmyxx27826OrvHc7Tl6JX5XKG4WtaOzlF4UHKvM3u/s1600/blue+2.png)
![How to add Bubble Comment Count comments in blogger titles](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7XWy3ahSgKgmaEft5q0ToTRZ1J03tm-kj6YV__RQABc0vs4XMEex1b98-iohIFrusl-N8U6EGlKCdJsz3IX4mwyMoGhBUJNSzIeGXTpY10tmjYfMdxL0I4SMvpKmqcIcmARjUnIjGrNc/s1600/blue.png)
![How to add Bubble Comment Count blogger tips, blogger tricks](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBPAo67y5_l2Eo-fxBJEE9_n3yWuF6eZV956b15GHnVdz4Xvp4K6gzuGhG8ySkluevZ2HPcUPG-LJbmZr3dyVxNpWXcxT22ES_rDJwXDix5ADCakkjhtPzGCftvRCtveu43hLSAzJGBOos/s1600/cloud+bubble.png)
![How to add Bubble Comment Count blogger widgets, bubble comment count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3WXP3sDPzXOARfEQzqcOVlXAL2saevewzB5ml5ztjKzEqkRT5gVne629O3SLwZYVa0aK3BhEMz15zoA9WMiIpKXNZfUddzZ69u-s55nYVPj0mZdsLM3J8oTWwJv2KkjGkfwaNht0wvGk/s1600/cloud.png)
![How to add Bubble Comment Count bubble comment count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6p_3VwmjTOKwT5GY7mEMUpYuOKovH4cGlD2iUj8GEmNj5Mt4vEDW6ofFv5ya-leeN1Lsu-zJ2wS2kx5IT-KJHKDI_QY24Sx5yStNzkJv5E0Y5CAoFjoL-30Dmo1cTtyuV2CSSVzapbzjT/s1600/comment+1.png)
![How to add Bubble Comment Count Bubble Comment Count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22h0oLcEuY69QaZA2XNElucR8fKefyg8j2NQKTishJkzKtokXDA32a6Zg1CObEf8u4fRyWSpWLL_IXS6GDkvmdd6Pjh-s2FflKK-vxVUZSEikFnZK1p2ogIQptU9gB18p4OpAfJbo1dnN/s1600/comment+bubble.png)
![How to add Bubble Comment Count Bubble Comment Count, blogger blogspot](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3zFStt591_5DdgT8EEpCgsmTQ-0KSf0Q0piyzK-vI_s86T908pIDqNrmewCLScJKh4BIRdGIkwmjdtrc5uJQWFFDxAtnYqUzhxrUqrJRDw5tI0FJ_TvDbMyC_OaohcmOmvttaACm-IGLO/s1600/devil+comment+bubble.png)
![Bubble Comment Count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2tpJQGMZTpFGI-sAjR_h9fZfzpkDszy28DAETWbgddha0ry5NryKfJDtPP_SRgABmIcMTX9ZIkxLw2CJSfc-GNGpWPvWGjXbdFQSYEeTc287fsOehtDPdXITBWFHK2To8Mo2rzK1TFJqf/s1600/funny+comment.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXLWNuEKWBe0YjNCAPdqfbQOk0z0oZe2hDvDqEBILnU1gpNoAowbXC87M6GUL9jKLf6ScLAAIS9F3i-5UMTCS2Oqor2cg3XOpBwygdHSnX-SQujJ7NjB_SEuzlc7i8jZ6LStJaqAyElxu/s1600/pink+bubble+icon.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5I-VmCdRc7Aby9W5HbclmpDz70jeReiUeWYjZKtOriz49DuXOvTMrFUzvy3zhWiFwNfnchWNQsJcpGrQUTd-Ep8ggQlezP_JOk7MGFISpcooXwtlAsa1BrOUfz8WrJ-G1-yXjLF1bcBM/s1600/speech+bubble+green.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXjaA4vTzy-bkuOsbdvXfIaWyw10nUzt9PFCj5aKbI2la0QGOq1fev8yyYNKsiX9Bip6oEy58pUAyylTZYbZhMSKCFL4xpIt4jgpMl8iMOjvCS8NuritKg8qQBovBn_YrpqtpqNrxgZvR/s1600/bubble+comment.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6qE2zwYNDsCwveEYiy9wIZcRUObxDPviAYWfYtGEzJLwXD4HgqYFTloanqc9Gs4byReIHf5_GVDGAncL7343X-gNvwUsLtRGCM4vM9IH_i3oXThyMaOAVEqOIN6Ji9y-eCY3ZqIxJUKaF/s1600/comment+bubble2.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCoihhbNGurDzKmch3QiRKF-SJwjFtKJj86bqtHA1YSVmatgmL40cJWTzUjjHOIoFZUWmZe8drVu0V8OasQCq8aYPpf0jNp7H6wVHb6hcUTsJtZOO4US1VfhDm3BlTrxg0Gp6MF1CfRAl2/s1600/comment+bubble3.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBL0VODpJ_U6STo6zQH_nY9kvMULs4M5U91BSALm-Be0i6LhfOOP6lpJfYhjWo7eZNZwVxG7To4NFA8OrHDt10Nt0AHWVYUM1UvyGZw29rIlIBQZn3s9zBnyrDJdIsqNS9Fx_ES_k5fCEl/s1600/comment+bubble4.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmR6mPrNv7UpgxhOo_t7WDpA9X8gX49NxXn656lQOfv7CbPcW2NfnXh5FVMJrjqL6cOmF0Qug04OPJKHgU8vhbEzmW64dOuvk6-QgoVhFN1MFACNhrsgTAwr84ZMrNGEkhyphenhyphenDEKS3rrSsPv/s1600/comment_bubble.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBqj6k5aVO6Pu36HsJCaII1j1bdpuAAO3y4L3wfqEdqrWQB6Q1H3s-5fM4PRgdZXeJ7lniyg_fS9g0r5uXh1LW2jVHQPNktK8XT2lfHS0PL6sXxcUVRn5R8K9S9nsAteo1OEOu5d8dRXJ-/s1600/text_comment_bubble_comments.png)
That's it! Enjoy!!! (:
Do you need to add more info on your blog posts? Then I recommend you reading this tutorial:
No comments:
Post a Comment