(Last week Mary Ann asked for this tutorial so here it is!)
Numbered comments are great if you're hosting a giveaway or blog party because it is that much easier to pick a winner by number. =)
First things first, numbering comments only work if they are embedded below your post.
1.) Go to your dashboard > template > edit HTML > and click 'Expand Widget Templates'
2.) Search for this code:
<b:loop values='data:post.comments' var='comment'>
(I suggest using find option on your browser: Ctrl + F)3.) Above that code paste this code:
<script type='text/javascript'>var commentscounter=0;</script>
This is the script that makes the numbers work.4.) Search for this code:
<data:commentpostedbymsg/>
5.) Below that code paste this code:
<span class="numberingcomments" style="float: right; font-size: 40px;"><a expr:href="data:comment.url" href="" title="comment link"><script type="text/javascript">
commentscounter=commentscounter+1;document.write(commentscounter)
</script></a></span>
This is the code that makes the numbers appear. You can change the appearance by editing the style="" section. commentscounter=commentscounter+1;document.write(commentscounter)
</script></a></span>
As always, if you have any questions--ask away!
In Christ,
14 comments:
Thanks! I think I will have to do this. :)
Thanks for the tutorial! :)
I found I didn't have this line in my code:
(data:commentpostedbymsg/)
So I added code #2 under:
(p)(data:comment.body/)(/p)
That worked fine for me! :)
{ ( = < and ) = > }
Oh my goodness, thanks SO much for posting this, Emily Grace! I have wanted{well, needed} to do this for the longest time! I have big giveways and a TON of comments and I always had to count the comments myself.. but not anymore:)
In Christ,
Rebecca
Hello, I have a question, how do you make a link change fonts, when you rollover it??
In Christ,
Rebecca
You're all so very welcome. :)
Eve - Thanks for sharing your own tip. =)
Rebecca - I'll start on a tutorial on links, you can expect it in the next week or two.
Thanks:)
Yay, thank you so much! Perfect timing since I have to pick the winners of my giveaway in a few days!
Thanks for following, Emily Grace! And your tips worked wonderfully. I appreciate it!
You. are. awesome. The end. (: Just one question...I'm having trouble changing the color of the numbers. Can you help me with that?
Also, if you're still wanting ideas for Tuesday's Tips, I've been wondering how to get target links in the header. If you know how to do it and would be willing to show us all how, that'd be amazing!
♥♥
Rebecca, Mary Ann & Storyfingers - You're all very welcome! :)
Jennoelle - The numbers take on the link color of your blog because they are linked to that specific comment. :) So change your link color and that will change the number color too!
For targeted links in the header, I'll refer you to this Tuesday's Tip. Let me know if you have any questions. =)
Hello!
I was just wondering, how do you change the font of the comment numbers? Thanks for this tutorial, btw. :)
Madeline - To change the font, find the style=" part in the code for step 5. Afterwards put font-family: FONT NAME; with FONT NAME replaced with your information. For more information on customizing the font style go here. Does that help?
I tried this awhile ago, and it worked. Then after awhile the numbers just disappeared. I tried it again now, and they won't show up. I haven't changed anything around that part of the HTML, so I'm not sure why it even disappeared in the first place. Would you have any ideas of what I can do?
Gloria {Lia} - I'm not sure what might have happened. Something with your html must have changed. What template are you using? I use minima and that is the only one I can guarantee will work. I would suggest deleting the code for the numbers, saving your template, then add the code for the numbers again and save. If that doesn't work, I would guess that there is something in your template that is preventing the code from working. Hope that helps you!
Post a Comment
Leave your thought...