1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find the following code:

<b:loop values='data:post.comments' var='comment'>

4. Right before or above add the next code:

<script type='text/javascript'>var CommentsCounter=0;</script> <!--START_COMM_NUM-->

5. Now find:

<data:commentPostedByMsg/>

... and right after paste the following one:

<!--COMM-NUM-STARTS-->
<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter 1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--COMMNUM-STOPS-->

6. Find </head> and before it paste the next code:

<!--COMM-NUM-STARTS-->
<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -10px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
</style>
<!--COMM-NUM-STOPS-->

You can change the background image with your own, you can change the values of height, width, color, font as you want.
For a demo check the comment section of my site.