Blogger Hack: Numbering The Comments

Advertisement

Some people may think numbering comments is simply unnecessary and too difficult to even try it. Is it true? Should you try at least? That's certainly up to you.



As You Can See In My Blog The Effect Of This Hack:



Advantages:

• It is a nice way of differencing each comment.
• It allows you to get the permalink of each comment, and this may work for future references (e.g.: “You should read this comment [URL goes here], I found it very interesting”).
• Indispensible for design purposes.

Possible disadvantage:

• If you’re lazy, you may find it too long and difficult, though that’s exactly how styling your blog is always going to be. Patience is the clue!


Let’s start then:

Go to Layout>Edit HTML in your dashboard. Check the "Expand widget templates" box, then search for this section of code and add what is highlighted:

<b:includable id='comments' var='post'>

........

<dl id='comments-block'>

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

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

<div class='' expr:id='data:comment.id'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/> <!-- You may, as not, have this line.
If it doesn't appear, it doesn't matter -->

<span class='numberingcomments'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>
.......
</dd>

</div>

</b:loop>
</dl>


Now we add this code in our CSS area, right before ]]></b:skin>:

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}

/*since the numbers are actually links, we need to force the color properties*/

.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}


And that's it!

*Good luck!

Important:

The hack explained here is only for "numbering comments". The original hack proposed by JMiur from Vagabundia includes the option of styling pair et impair comments based on the numbering (of course).

Credits : Randomnessf1

This Blog Has Been Moved To Wordpress..So check Smart Bloggerz Here.

Blogging Tips

What’s Next? : Don't Just Move Away... Wait! Say something by using the Comment Form below.My Blog is a Do-Follow so enjoy giving your comments and get backlinks from my PR3 blog.

| Add your Comment | Follow me on Twitter

You can also Subscribe to this blog :

Share and Enjoy!

Keywords : Cheap Domains, Make Money Online, Blogging Tips, Web Hosting, Blogger Templates