Download PDF Owners Manual: Showing Number of Comment Above Post

Showing Number of Comment Above Post - to show number of commet above your post you must edit your template, and I want to explain how to make it. you can see the picture below:

it is the example, you can make it in your blog, and this tutorial not make your blog heavy because this tutorial used CSS.

You can follow this tutorial:

=> Login to your Blog, go to HTML edit, check Expand widget template.

=> Search code ]]></b:skin> in tour template.

=> Paste this code above code ]]></b:skin>.

a.comment-bubble:hover{color:#cc6611;}
a.comment-bubble {
float:right;
width:34px;
height:18px;
text-align: center;
white-space:nowrap;
font: bold 14px monospace;
color:white;
position:relative;
margin-left: 6px;
margin-top: 3px;
padding-top:2px;
background:#eeaa00; /* fallback */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f8dd99), to(#eeaa00));
background:-webkit-linear-gradient(#f8dd99, #eeaa00);
background:-moz-linear-gradient(#f8dd99, #eeaa00);
background:-o-linear-gradient(#f8dd99, #eeaa00);
background:linear-gradient(#f8dd99, #eeaa00);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border: 1px solid #dd8808;
border-bottom-color: #f8dd99;
border-right-color: #f8dd99;
}
a.comment-bubble:after {
content:"";
position:absolute;
bottom:-5px;
left:11px;
border-width:5px 5px 0px 0px;
border-style:solid;
border-color:#eeaa00 transparent;
display:block;
width:0;
}

=> Search your blog title code in your template, usually it shame like this code:

<b:includable id='post' var='post'>
<div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>

NB: if your title template not used h3, you can search h3 become h2 or h1.

5. add the red font below under the code.

<b:includable id='post' var='post'>
<div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.url + "#comments"' expr:title='"Comments to &quot;" + data:post.title + "&quot;"'><data:post.numComments/></a></b:if>

6. Save your template.

ok, I hope this tutorial useful for your blog, and happy blogging.

Pages

Showing Number of Comment Above Post