So let's start adding it:
Step 1. Go to Dashboard - Template - Edit HTML (click on Proceed button, if needed)
Step 2. Select "Expand Widget Template" (make a backup)
Step 3. Find - using CTRL + F - the following piece of code in your template:
]]></b:skin>
Step 4. Add the below code just above ]]></b:skin>:
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsPIuuA5DeAF9Cii9X3Hy1lu8QxPF_JfdqR16AgdnZfXYiCONbQCqjnEKOaACg0M0K4JCcTQIvkSh7Y4JyZl-NeM1OSnelVLHYuwIDlvf7hA-gxuVsPD8TqWEehpXdwnbyJdoHIZ18ZwjA/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
Step 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'>
Step 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;
Step 7. Preview your template and if everything is ok, click on Save Template.
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.
![how to add bubble comment count bubble comment count, bubble blogger posts](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NO1iKCPaWg9zOK_7t8G7C_wr0mOT99hf8gCm80seq95jKPt1kAsMR_SyoxbwhOKXCEXmx7W7rcO_sticAiPJzfQE14u3dcKqy_rDmSxh7uQtjWp04YGg8q_-fPWIcXgRYHnlang4Z2U3/s1600/4.png)
![How to add Bubble Comment Count blogger comments, comment count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiURd65qq9ExAOpmH4CHmEuFrz2TfXM_ygmR8MRBFcaKKrEhPKnBy_mhWS5FlbT0GeeTum3IaqM5V0XoODMMxNGoH8LxT7qu32h6wfMbO2tK7HCDAVauqFHXwKPJcxJAWEh4mmGpIWsOIK_/s1600/2.png)
![How to add Bubble Comment Count blogger blogspot, blogger comments](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijauRgGezZHleVZoZMtO6MRdsqEaqpRwZab8eidXeacSuRPMJLB8Z56fYkYkEJ1qswcidXMAPgt342If3-M6kNYmJ_N1GPVhrNoQq5PRZBfrIPv9Nk3w0s_GTCPJbynD0qgqkt1o2_29Sr/s1600/3.png)
![How to add Bubble Comment Count blogger bubble comment count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ltXOnGWAeSi-tLBQFzPD04zhXQeRTrrBvrSo9KzQ23CKdckFH2rHbmnEOGkhPrHDnhUmJstZ696ZgEinIT8ImC8J7DxPSamyaI6pmSnk867dcGBD1cRBESQtwazq5HKQpuMNumu1GSKj/s1600/blue+2.png)
![How to add Bubble Comment Count comments in blogger titles](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVTMo6OoP4sDL5JhWI6TanXZ1VttrbMcXEetuUqhmXxLH09h3Z7YL9z9Hk-ielo71jZwJ_-RQtna8fkqw1P-FwcDNa0Qc8LWBOPDW6G3AytOTfJIH7EcP3EVmTcoJTLg5kWF4uwZN0se0V/s1600/blue.png)
![How to add Bubble Comment Count blogger tips, blogger tricks](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewtt-AOLfmpsyIQZT8keBEEgG9nRSnyvFizotmdkKIQNpeOVzHtCtSuX8_Uq_yHN3Vh-xcpKDmhi7YRWEluiohoPti_L_nE_jyx5zCsJICIaISo6tdqikqWBl0KtEC8n76h5Hznk1BAxg/s1600/cloud+bubble.png)
![How to add Bubble Comment Count blogger widgets, bubble comment count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv1F5Hoa3TJt-FD3e-oeA0DU4Ft1UMtQVD1A3X0JCwpyV5xGA9Fyx8J89Jo9waQAu4ghlHfm4V7vGPtXA7B0ULlp1yuWR7E9Q3exfY1cjjvcTst7HzmQfWgGCSciIhEaKXGraCpHzGhJs/s1600/cloud.png)
![How to add Bubble Comment Count bubble comment count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPcGFu8IPIxU9HhbFYvVpJD9DN42SmpEnKsydwwBJXK1EofHshnTTxod8c5Z98FVDCVkKoPdy2TnRinmz3VXvOoXR8Ij2mkZRFH8j6W7QykLOOOn47_dOBvZwj_9s4yjIE7qPxRPFMezmN/s1600/comment+1.png)
![How to add Bubble Comment Count Bubble Comment Count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaL6ML1f6NqlncB82ksmXgIbE2tYaT9_6jIN96LVY1SgV9bXOybrGYHDQJuqZaiWwnYNEhCTak3kMBr4zqkfMn0Lug18TRkTNp7vFqe_AaSzTRz1xuck3EArSaos0Y96QQRmJugooqTSUL/s1600/comment+bubble.png)
![How to add Bubble Comment Count Bubble Comment Count, blogger blogspot](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZXeqSDxO9RAhc0Kh_GtK1qjmpzrrj05_uO5Dsa0_a1eBbm87KL_T4U2jAbFcrUPnNoK189w9NFqUCxuQc77v4SFxdl1VXrOiXlk1G5wxtzd3TfH2VxdX2mWYjdo53TjcIKQ_gG50YaoPb/s1600/devil+comment+bubble.png)
![Bubble Comment Count](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ccZxNHCrDisojf5ni9qaF9ovPc0AwDFTR-WmBXeKsk7qDPKaAFuFikB0i_wM4GNNU1Ix1J8y9GNqMTeq0f_4Hf1qutPxEaCwvEZojjq3lRqm7fY0A8L_nEfoVk8f1zgxqYWUT16boftN/s1600/funny+comment.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Y6rtrWXnRLr990xpqKqe1YKjfzSp-ihGPzvMIzbOAWheAN4dIEXu2dDXYZohUMuhyR22iLUwzZeOdjqADGpsuCwPTNVfi5tV3H__aa2uabUlr5RU3KuJKQ_DqkFgkTcbBAKi5RndPWNe/s1600/pink+bubble+icon.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsPIuuA5DeAF9Cii9X3Hy1lu8QxPF_JfdqR16AgdnZfXYiCONbQCqjnEKOaACg0M0K4JCcTQIvkSh7Y4JyZl-NeM1OSnelVLHYuwIDlvf7hA-gxuVsPD8TqWEehpXdwnbyJdoHIZ18ZwjA/s1600/speech+bubble+green.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjka9CoxC9eqHDOLOGV3DDObz4fhRfYDX2xcKY8XDvoCUp9MHafX8EVOpV6Og3wgBAgUm8BTExTN64Kp6mZGxJWfB5O2_62JY-dlTFiQM-5Wh4LPEx0DRhhmN05-7HWHARdwXEjrhYSThtZ/s1600/bubble+comment.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZBFohQBIPL5eWqRe46ktpNVmy8qtZ-mSFkXw45gLbHASih9g5AkPCfL1oiOV1Jb6eI02ZLUN0XS-z42j82TlXYEMzC3bsCu1qfDbm9W94fGKfYCo-KcffPuDjtLtf-fTUwJzd6y9icOhd/s1600/comment+bubble2.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjBenTVk-_HlgdxV6EKXBJnHwcDKqughyphenhyphenmwmv2lO07loKvTB5a8h-leKgCxG75hYoMWba1GRDnAn8p_qfUudOlNWgPJ_uS9li8yp1SBvZ4cSas9PtVqo3AghATebDQTK8GGhntl7a2qXk/s1600/comment+bubble3.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7bZPXrS0DPguE-M3Su80htC4U66C9AA487Viya2zNl5cCCU1j4tJDJHBNlIw5Q1iIk7xSDwkZPPc3-xMFMWSym8tJs0lG8GZE6-_zCv68sHH6Rps7r79ji53FshWxdrmi8fSDZxbRUar/s1600/comment+bubble4.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid7LRxvwtOAM526hyghKIwpRCcGIE182gMDjk7-TqgGLcBUyww64PC-D3LVR03Hi-347z_kkDLdzQ6FbgjY0Mw-cu1I9F50_QjdNLuZ2eHz1yRR994DBZKpgwdsPy3uSt_TU8IVk38Ccz1/s1600/comment_bubble.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUSSyX1q3EzqOdpUNrSfaZo6l2UTkVPbfE3Q9Mz5WtKYfE0PVrvK3IvZNzQ0VAlCK0BwMM9IO5YzwlnOR1hbE49x-w2d_DFwpwopRiMCtOcSaZxrI_CrInadbeBCLjRcr4gHjj5xtpLLCU/s1600/text_comment_bubble_comments.png)
That's it! Enjoy (:
You might also be interested in reading this tutorial:
0 comments:
Post a Comment