See Demo at the last of this post
*Step 1*
Login to blogger.com then Click on Layout >Edit HTML
Now Tick on the Expand Widget Templates
*Step 2*
Now Search
then paste the below code Just ABOVE it.
Now Search for
Now paste the below code just above this
Now the red colored code should be replaced by you.
Just change the url for ur choice image .
Now just save Template and enjoy :)
thankx [BloggerStop.Net]
Do you want to put this counter in your blog ?
If yes then just follow the below instructions :
Login to blogger.com then Click on Layout >Edit HTML
Now Tick on the Expand Widget Templates
*Step 2*
Now Search
<b:loop values='data:post.comments' var='comment'>
then paste the below code Just ABOVE it.
<!--COMMENT COUNTER-->
<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>
<!--COMMENT COUNTER-->
<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>
<!--COMMENT COUNTER-->
Now Search for
</head>
Now paste the below code just above this
<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: -15px; /*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 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: -15px; /*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>
Now the red colored code should be replaced by you.
Just change the url for ur choice image .
Now just save Template and enjoy :)
thankx [BloggerStop.Net]
this is the DEMO for this post :D see in the top right corner of this comment
Posted on January 24, 2010 at 6:46 AMNice work!! Love ur Blog........................ :))
Posted on June 15, 2011 at 7:40 AM