making comments link more user friendly

Making the COMMENTS Link more User Friendly.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

The "0 comments" link at the bottom of the blog posts can hardly be called intuitive. Viewers fail to understand it's significance. That is why on this blog I have customized it to make it more viewer friendly.


If there are no comments on the post this is what appears "Be the first to leave a comment!". If only one visitor commented on the post viewers see "1 VIEWER CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT." If more than one visitor left a comment than you see "n VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT." where 'n' is the number of comments left.


This can be done by customizing the comments code.............



ENABLE COMMENTS

The first step is to enable comments in your Settings. There are three places where comments have to be enabled. Login at Blogger.com and click on Settings link on Dashboard. Follow all steps outlined in Tips on Blogger Comments to enable your comments.



This will make the comments show up on the Post Pages. On the Main Page comments are not shown since it would make the Main Page slower to load if there are many comments. If after enabling all comment settings they are still not seen then possibly your template code has been corrupted. To reset it first backup your widgets data and customization. Then login at Blogger.com and click Layout link on Dashboard. Click Edit Html subtab of Layouts tab. Scroll down to bottom of Template Code box and click on the "Revert Widget Templates to Default" link. This will lose any customization in widget templates which you can restore from the backup you had made first.




MODIFYING THE CODE

To modify the comments link code login at Blogger.com and click Layouts link on Dashboard. Click the Edit Html subtab of Layout tab. Click the 'Expand Widget Templates' checkbox on top right of the Template Code box. Wait for the page to refresh and scroll down to locate this code in the Blog Posts widget :

<span class='post-comment-link'>         <b:if cond='data:blog.pageType != "item"'>   <b:if cond='data:post.allowComments'>    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>           </b:if>         </b:if>       </span>

Copy and paste the code below instead of the above code :

<p style='font-size:90%'>What have you to say?</p> <span class='post-comment-link'>    <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>     <p style='font-size:90%'>Be the first to leave a comment!</p> <b:else/> <b:if cond='data:post.numComments == 1'> <p style='font-size:90%'>1 VIEWER CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.</p> <b:else/> <p style='font-size:90%'><data:post.numComments/> VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.</p> </b:if> </b:if></a>           </b:if>     </span> <b:if cond='data:blog.url == data:blog.homepageUrl'> <p style='font-size:90%'>Who has talked about this post?</p> </b:if>

Preview and save the template. To increase the size of the letters increase '90%' in the code above.

That's it,the rest is what the users will likely to post comment your blog.



.