Step 1.
If you are using the old Blogger interface:
- Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
- Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Find (CTRL + F) the following piece of code in your template:
]]></b:skin>
Step 3. Place this code just above ]]></b:skin>:
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Hwlyt2dyJwg-Ml7YesAlyD9_AdGr1b2JdvVYBrZs3tvIBK4OQbBzfuWD2jnpbShZqYtdq5HWzgx6-DHNNNyyQTwea2wsBSpYbgBBJpvNHmOwe0yBQ-y_F6EhFTXvuxbXBbbWTy9FiGhH/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
Step 4. Now find the below 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 5. 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'><data:post.numComments/></a>
</b:if>
Step 6. Now Preview your template and if everything is ok, Save the Template.
You can choose one of these images below (Right click on the desired image and select "Copy Image Address/Location" - paste it instead of the red code from step 3)



















Enjoy (:
0 comments:
Post a Comment