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.
You can see the modified comments link in action in this blog.
Enjoy!
Making the COMMENTS Link more User Friendly. |
Where to Add Code in Beta Template. |
You can add code to the template in beta at these places.......... ADD Metatags here ADD FEEDBURNER METATAGS HERE ADD CODE FROM GOOGLE SITEMAP HERE ADD GOOGLE MAP/SEARCH AJAX API KEY CODE HERE JAVASCRIPT CODE ALSO GOES HERE <head> <META content='GOOGLE ADD SITEMAP CODEg=' name='verify-v1'/> <SCRIPT src='http://maps.google.com/maps?file=api&v=2&key=API KEY' type='text/javascript'/> CREDITS FOR THE TEMPLATE /* Starts with /* Add CSS code here including code for navbar Add variables to properties of css elements Add image urls to add pictures to background etc Starts with <b:skin><![CDATA[/* CSS PART OF TEMPLATE Ends with ]]></b:skin> Javascript Code Add a Javascript with a function here <SCRIPT type='text/javascript'> } If there is vacant space here you can add a table or divs here If you want to start a Javascript onloading the body add this code <body onload='load()' onunload='GUnload()'> here <body> BODY </body> <DIV Outer Wrapper </div></div> <DIV id='header-wrapper'> Header Wrapper </div> Change number of maximum widgets in the section here Add a Add Page Element link to this section in Page Elements tab under Template tab here <b:section id='header' class='header' maxwidgets="1" showaddelement="no"> Header Section </b:section> To add to widget go to Page Elements tab under Template tab Change whether widget can be deleted or not by changing false to true There are at present twelve different types of widget data <b:widget id='Header1' locked='false' title='NAME OF WIDGET' type='Header'> Header1 Widget </b:widget> <DIV id='content-wrapper'> Content Wrapper </div> <DIV id='sidebar-wrapper'> Sidebar wrapper </div> <b:section class='sidebar' id='leftsidebar' preferred='yes' showaddelement='yes'> Sidebar Section </b:section> To add to widget go to Page Elements tab under Template tab Change whether widget can be deleted or not by changing false to true There are at present twelve different types of widget data <b:widget id='Label1' locked='false' title='Labels' type='Label'> Widget/s </b:widget> <DIV class='widget-content'> </div> <H1 class='title'> </H1> Starts with <b:includable id='main' var='thiswidget'> Main Includable Ends with </b:includable> <b:if cond='condition'> <b:loop var='identifier' values='set-of-data'> The include tag <b:include name='post' data='i'/> <DIV id='main-wrapper'> Main wrapper </DIV> <b:section class='main' id='main' showaddelement='no'> MainSection </b:section> To add to widget go to Page Elements tab under Template tab There are at present twelve different types of widget data <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'> Blog1 Widget Posts </b:widget> <DIV id='footer-wrapper'> Footer Wrapper </div> <b:section class='footer' maxwidgets="1" showaddelement="no" id='footer'/> Footer Section </b:section> To add to widget go to Page Elements tab under Template tab There are at present twelve different types of widget data <b:section class='footer' id='footer' maxwidgets='4' showaddelement='yes'/> Widget/s </b:section> Technorati Tags:code, javascript, template
If you cannot see the full table below please go here.CODE TO BE ADDED PARTS OF TEMPLATE LANGUAGE DECLARATIONS <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<meta content='DESCRIPTION HERE' name='Description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='index,follow' name='robots'/>
------------------------------------------------------
Blogger Template Style Sheet
Name: Name of Template
Designer: Name of Designer
URL: Home page of Designer
Date: Date designed
Updated by: Blogger Team
Name of Modifier with his homepage
------------------------------------------------------- */Add the Variable Definition here so it shows up in Fonts and Colors Tab under Template tab
Variable definitions
function load() {
</SCRIPT>Between CSS above and BODY below
id='outer-wrapper'><DIV id='wrap2'>
[content to display if condition is true]
<b:else/>
[content to display if condition is false]
</b:if>
[repeated content goes here]
</b:loop>If /Else conditional and Loop clauses AddGoogle Analytics /statcounter code here IMMEDIATELY BEFORE </body> You can add Javascript code after </HTML> </BODY>
</HTML>
WHERE TO ADD SOME COMMON CODES :
Technorati Code - in a Html/Javascript page element in the sidebar.
Sitemeters - in a Html/Javascript page element in the sidebar.
Google Analytics - Just before </body> tag in Template.
Metatags - Just after <head> tags in Template.
CSS codes - see table above.
Javascript code - in a Html/Javascript page element in the sidebar.
Links Code - in a Link List Page Element in the sidebar.
Feeds/Feedburner Code - in a Html/Javascript Page Element in the sidebar.
Feedburner autodiscovery code - in the Metatags section
Social Tags - At end of Blog Post code in Template.
Javascript loaded by a body load() - Just above </body> in Template.
Other Javascripts - Just above </head> in Template.
External CSS stylesheet URLs - Just after <b:skin>
Change Mouse Cursor to a PIC. - Add code in CSS eg. BODY {cursor:url(URL OF PIC);}












