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

Make Money Online

| 5 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:diam

• 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:gatai

• 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).fikir

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 to Technorati Favorites | Add your Comment | Follow me on Twitter Follow me on Twitter

You can also Subscribe to this blog :


Share and Enjoy!

Digg Stumble This Del.icio.us Mixx Furl Propeller Simpy Twitthis Add To Slashdot GoogleYahoo Reddit Technorati BlogmarksSmarkings SphereIt Sphinn Feedmelinks


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

5 comments

Fernandooo1 said... @ August 10, 2008 at 1:22 AM

Hi!

=] You have this code in your template:

numberingcomments{......}

While it should be:

.numberingcomments{.......}

There you can edit the properties of the numbers (font-size, font-family, position, etc).

Thanks for the post ;)

See ya!

Roxy said... @ August 16, 2008 at 12:55 AM

Now i come know about this thing, that we can do it on our blog. I will keep remember your point as well Fernandooo1. Thanks for nice article. thanks :)


Regards,
Roxy
Web Designer

M*Shawnte said... @ September 18, 2008 at 10:21 AM

Hello. I really wanted to try this but I don't have that first block of code, that starts with dt, in my template. I don't have this, dl id='comments-block, either. What could I do or look for so I can paste the new code in the correct places?

Typhoon said... @ September 19, 2008 at 4:07 PM

@M*Shawnte

You should try searching for data:comment.author or any other text given in script and following that you can find something close to dl id='comments-block .You are having the problem because different designers uses their own type commands of their choice..

In my own template that section is named as div class='comment'.You can try finding for that in your template too,if lucky you will be able to put the script afterward..

Post a Comment

Hello and welcome to Smart Bloggerz. I appreciate your comments and if you like what you just read you can subscribe here to get quick updates.
Also, My Blog is a Do-Follow so enjoy giving your comments and get backlinks from my PR3 blog.