How Do I Number My Comments on Blogspot?
Blogspot is a commonly used blogging platform that allows bloggers to connect with a greater Web community. After a visitor reads a blog, they can choose to leave a comment. The amount of comments left indicate how well liked a post or a blog is. Numbering the comments further enhances the blog's appeal. Numbers don't naturally appear next to each comment, so the blog's HTML source code has to be edited. Once it is edited, numbers appear automatically.
Other People Are Reading
Instructions
-
-
1
Login to your Blogger account. In the dashboard of your blog, click on the "Design" tab. Click on the "Edit HTML" menu. A screen will appear, entitled "Edit Template." Check the box next to "Expand Widget Templates." The box below this displays the HTML source of your blog.
-
2
Find the code below in the HTML source code of your blog. This can be done by using the "Find" function in your browser.
<b:loop values='data:post.comments' var='comment'>
Go to the very last word in the line above it, and hit "Enter." A blank link will appear. Highlight and "Copy" the following HTML code:
<script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
"Paste" the code into the blank line. Your source code will now appear as:
<script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
<b:loop values='data:post.comments' var='comment'>
-
-
3
Locate the following code in your HTML source code:
<data:commentPostedByMsg/>
Go to the last word in the line above it, and hit "Enter." A blank link will appear. Highlight and "Copy" the following HTML code:
<!--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-->
Go to the blank line and "Paste" in the code. Click the "Save Template" button.
-
4
Click on the "View Blog" button near the top of your dashboard. Open a post with comments. Numbers should now appear next to each comment. Go back to your Dashboard. Click on the "Design" tab, and the "Edit HTML" menu. You will now add a design to the numbering.
-
5
Highlight and "Copy" the following 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://i48.tinypic.com/o5oupx.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>
-
6
Find the following code in your HTML source code:
</head>
Find the last word in the line above it, and hit "Enter." This will create a blank line. "Paste" the code into the blank line. The HTML source code now appears as:
<!--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://i48.tinypic.com/o5oupx.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>
</head>
When comments appear on your blog, they will now be numbered and appear in a cloud image that highlights the number.
-
1
References
- Photo Credit David Sacks/Lifesize/Getty Images
