Blogger Trick : Adding numbering to comments after each post using jQuery

Another pretty simple jQuery code to put more information on page.. the way we want.  What if I want to see numbering after or before each comments on my blog. Yes! solution is there and very easily achievable if you have idea about html layout of   Blogger.

In plain English the solution would translate to

1. Find the HTML Element with id="comments-block"

2. Find all DT Element inside it

3. Insert content of your choice. that's it.

and  the above solution in jQuery can be translated to :

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>
</script> <script type="text/javascript"> $(document).ready(function() { $("#comments-block").find("dt").each(function(i){ $(this).prepend("<span style='color:red;margin-right:2px;" + "padding:2px;background-color:silver'>" + (i+1).toString() + ".</span>" ); }); }); </script>

See the demo page with numbered comments here.

WOW jQuery is really great. Definitely the page doesn't looks great ..but the goal is achieved. I leave this creativity to readers. Please do post links of your creativity here.

2 Comments:

Felicia said...

I can't get this to work either! I can't find anything to number my comments.. any suggestions?

http://www.gograhamgo.com

Felicia

sumit said...

RE: Felicia

I have got it working on my blog. Try pasting the code after

data:post.avatarIndentClass' id='comments-block'>

that is after avatar dl

Hope that works.

...and many thants to the author for this post. Keep up the good work!

Post a Comment