If you want to show the
number of comments just next to your blog post tiles then comment-bubble is a
best way to show number of comments to that particular post in a small bubble
icon.This little bubble will also increase the number of comments on your blog,because
by clicking on the bubble your readers can directly access the comment-form of
that post.Also you can add this in two easiest ways,just follow below steps
carefully and you will easily add this to your blog.
How To Add Comment Bubble
Just Next To Post Title?
Go to Blogger Dashboard >
Template
Take a backup of your
template
Click On Edit HTML
Hit Proceed
Check Expand Widget
Templates chechbox.
Find below code in your
template
]]></b:skin>
add below code just above it
.comment-bubble {
float: right;
width: 48px;
height: 48px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxQVn2255mSOnvFexPNKB0_Q34WFf3Avw1ZeHKDUHjSWvIUOVzWnM4bO_OJV_G-Lbl620PMWoueDnzdTEX9_V4h4qDvhM5mPh9mdiNrG0i01Rc-j3F02g9kem4-egWhRKvhYqfOEpraJ1/s1600/helperblogger.com-commentbubble.png)
no-repeat;
font-size: 18px;
float: right;
margin-top: -15px;
margin-right: 2px;
text-align: center;
position: float;
text-align: center;
}
Now find for below code in
your template
<b:if
cond='data:post.link'>
replace it with below piece
of code,
<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>
<b:if
cond='data:post.link'>
Now take a preview of your
template,if you want to adjust the position of comment bubble then you can
change the above CSS values as you need.When you feel that everything is ok
then save your template.You can also replace the bubble with your own
bubble,just replace the URL of bubble with your own bubble URL.
Posted in: Blogger Tricks
How To Add A Comment Bubble Just Next To Blogger Post Titles
Reviewed by RD Singh
on
22:38
Rating: