How to Create a Numbered Comment System on Threaded Comments in Blogger

Recently Blogger Had Introduced Official Threaded Comment System, and it is Very Easy to Install.Well Having a Numbered System on threaded Comment System is very Useful to Determine the Comments in an Easy Form.So let's See How to Add this. Before Doing this You've to Enable Threaded Comment System to Your Blogger Blog.


How To Enable Threaded Comments System to Blogger Blog


Well To have a Threaded Comments System is Very Easy Just Like 1 2 3. You Don't Have to Add any Javascript Code or Css.Just You've to Enable Some Keys in Your blog Settings.So Follow the Below Steps:


Go to New Blogger Interface and
Go to Your Blog Settings > Posts and Comments.
Now Navigate to comments Section and Change the Comment Location to Embedded one.
Now Go Back to Settings and Choose Other Option Below Search Preferences.
Now Navigate to Site Feed And Make Sure that Your Blog feed is set to Full. if not then Fix it
Go to Site Feed > Allow Blog Feed > Fix it to Full


that's it Now Your Blog has a threaded Comment System Enabled.

How To Create Numbered Comment System On Blog?


Well Go Back to Blog and Login to Dashboard > Template  > Edit Html
Check Expand Widget Templates.
Now Search for the Below Code 





<b:loop values='data:post.comments' var='comment'>
Now that You've Found the Above Code.So Right Before it Add the Below Code


<script type='text/javascript'>var CommentsCounter=0;</script> 
Now After Doing the Above Task Again Find the Below Code

<a expr:name='data:comment.anchorName'/>
Now After the Above Code Paste the following Code

<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>
Now Find the 
Find ]]></b:skin> and before it paste the next code:

.comm-num a:link, .comm-num a:visited {
color: #000 !important;
text-decoration: none !important;
background: #F7F7F7;
border: 1px solid #ddd;
width: 35px;
height: 20px;
float: right;
display: block;
padding:2px;
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;
}
Now the Red Colored Text Represents the Color of the Comment number and Green Highlighted Text the the Color of the Comment number While Hovered.You Can Change the Color According to your Wish.

0 comments:

Subscribe to: Post Comments (Atom)
Blogger Template by Clairvo