Customize “Comments” Links On Home Page Of Blogger Blog – Tutorial

Today, Blogger is a widely used blog platform which is totally free and easily manageable. Users get the freedom to customize their websites according to their needs to improve the look and search engine optimization of their websites. Google offers free stock templates to begin with which are fully customizable. These stock templates are also utilized to develop professional level templates which look totally different from the mother templates and are fully optimized for search engines and other different features.

Here in this tutorial, I shall explain how a blogger who owns a blog hosted on “Blogger” platform can customise the “Comments” links which appear on the main page of his or her website. I am talking about that comment link which appears under or above each post on homepage and directs users to comments made by readers and the comment form. This tutorial carries more than four types of customisation which I have described step by step in most easy manner to make it possible for those people who have little or no understanding of HTML codes to accomplish the task successfully. The described customizations include:
1- Remove “Post Comments” links entirely from homepage without disabling comments.
2- Order “Post Comments” links in post footer widget. (Includes two arrangements descriptions)
3- Fix plural “Comments” link label for one comment.
4- Add or change text appearing on “Comments” links on main page.

How To?

Remove “Comments” Links Entirely From Home Page:
Before continuing, make sure that you backup your blog template in case anything goes wrong, you can recover the template from backup. For that purpose, go to Blogger Dashboard > Template > Backup / Restore. Press “Download Full Template” to get a backup copy of template on your computer.

Now, follow these simple steps:

1- Go to the Template section and press Edit HTML to open HTML editor.

2- Now, locate the following tag:
<b:includable var='post'>

[It’s an opening tag which contains further HTML codes which deal with the “comments” links that appear on the front page of Blogger blog. You can use “CTRL  F” buttons from keyboard to open a search bar which will help you to quickly navigate to the code.]

3- When you locate that tag which is mentioned in Step No. 2, expand that. Now, simply locate this code:
<data:post.commentLabelFull/>:

<a expr:href='data:post.addCommentUrl' expr:><data:post.commentLabelFull/>:</a>

[These are the codes which deal with the “Comments” Links or “Comment Buttons” which appears on the Home page of your blog.]

4- Delete any one of the code mentioned in Step No. 3. Deleting any of the code will have the same resultant affect that is the comments links will be disabled from appearing on home page. Note that this will not disable the commenting service entirely and users will still be able to make comments on your blog posts.

5- Preview your template by pressing “Preview Template” button. If everything is okay, save the template. You are done. If you want to restore the comments links on home page in future, simply add the same code at the exact location from where you have deleted it.

Order “Comments” Links In Post Footer Widget:
Ordering post footer widget is very easy through “blogger layout” (Control Panel > Layout > Blog Posts > Edit > Arrange Items). But if for some reason, you are not able to do it from there, you can always do it from HTML Editor.

At this moment, I shall explain only two arrangements. But if you understand the technique behind this, you will be able to adjust it at any other desired place by yourself.

Arrangement 1: Comments link will appear solely in the last row of post footer widget

Follow these steps:
1- Backup your template first. Now, open HTML editor and find this opening tag:

<b:includable var='post'>

2- Expand it and locate this code:

<span><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:post.allowComments'><b:include data='post' name='comment_count_picker'/></b:if></b:if></b:if></span>

Or if you could not find that code then locate this code:

<span><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:><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></b:if></span>

[This second code was previously used in stock Blogger templates for “post comment” links. But now it has been replaced by Google with the first code.]

3- Remove the code displayed in Step No. 2. After removing that, find this small tag at the same location and not somewhere else:

</b:includable>

[This is actually a closing tag of opening tag which is displayed in Step No. 1]

4- Now, exactly above the tag which is displayed in Step No. 3, paste the following code:

</p> <div><span><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:post.allowComments'><b:include data='post' name='comment_count_picker'/></b:if></b:if></b:if></span> </div> <p>

5- Preview the template. If everything appears fine, save the template. You have done it successfully.

Note: Sometimes, even if you have saved the template and want to get out of HTML Editor and go back to blogger control panel, a message appears “You have unsaved changes that will be lost”. Just ignore that message. It appears due to redesigned HTML Editor. Next time when you open the HTML editor, this error will not appear.

Arrangement 2: Comments link will appear adjacent to Author’s profile link

Follow precisely Step No.1 and Step No.2 as described above under “Arrangement 1”. But from Step No. 3, there will be some difference which is explained here:

3- Remove the code displayed above in Step No. 2 in “Arrangement 1” description. After removing that code, locate the following code at almost the same location.

<span><b:if cond='data:top.showAuthor'><data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'><span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><span itemprop='name'><data:post.author/></span></a></span><b:else/><span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><span itemprop='name'><data:post.author/></span></span></b:if></b:if></span>

4- Now, exactly where the above code ends, paste the following code:

<span><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:post.allowComments'><b:include data='post' name='comment_count_picker'/></b:if></b:if></b:if></span>

5- Preview the template first to make sure that there is no issue arising. Then save the template. You have done it.

Fix Plural “Comments” Link Label For One Comment:

Here, you will learn how to fix this odd behaviour of comments link when there is only one or no comment.

Follow the following steps:
1- Backup your template first then go to HTML Editor and locate the following opening tag:

<b:includable var='post'>

2- Expand that tag and find this code:

<span><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:><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></b:if></span>

3- Replace that entire code displayed in Step No. 2 with the following code:

<span><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:post.allowComments'><b:include data='post' name='comment_count_picker'/></b:if></b:if></b:if></span>

4- Preview the template and save it. Later, test whether the new code which you have entered in your template is working fine by navigating through different pages on your blog.

(Note that if you have already saved the template and the warning “You have unsaved changes that will be lost” appears while getting out of the HTML editor, ignore that. It appears due to the redesigned HTML Editor by Google.)

Customize Label Appearing On “Comments” Links On Home Page:

Here, I have explained how to do this the most easy way. This method not only retains the numbering of comments but also adds an additional text on the comments links on the main page of Blogger hosted blog.

Follow these steps:
1- Backup your blog template first. Open HTML editor and find this opening tag:

<b:includable var='post'>

2- Expand that tag and locate the following code there:

<data:post.commentLabelFull/>:

3- Now, where the above code ends, add any appropriate text phrase of your desire. For example “Leave yours”, “Leave a comment” , “What’s yours opinion?”  etc. See below how I add:

<data:post.commentLabelFull/>. Post your opinion:

<data:post.commentLabelFull/>. Leave your comment:

4- Save the template after previewing it.

I have tried my best to bring working solutions for you. I have devised and then tested all these tweaks on different stock templates and custom templates based on stock templates before publishing them here. Still, if you encounter any difficulty while applying any of these customisations, feel free to ask in comments section below.

Published on Sept. 27, 2013