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.

Default Blogger Comments Link - Benign Blog

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:

[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:

[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:

2- Expand it and locate this code:

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

[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:

[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:

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.

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

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:

2- Expand that tag and find this code:

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

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:

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

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:

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

Related Posts

K-Lite Mega Codec Pack Review – Best Windows Codec Pack Windows is the most popular and commonly used operating system today. Despite of being the best in the software market, this OS does not offer everyth...
Well Water: Cold In Summer And Warm In Winter – Reason You might have observed that well water is felt cold in summer and hot in winter season. And you might have wondered why this happens! The reason of t...
Lightning Does Not Especially Strike Black Objects And Living Bodies Some people believe that it is not safe to walk outside during lightning as it can kill you. Some others think that one should not use black umbrella ...
Performance Analysis And Benchmark Of Hard Drive Brands This is the performance report of various famous hard drive (HDD) brands and models which have been tested and benchmarked, and published in this post...
How To Use Task Manager On Slow Android Phone Without Losing Performance When Task Managers or Task Killers which are available at Google Play Store are used, many people complain about loss of performance, speed degradatio...
How to Extend UPS & Power Inverter Backup People use power backup devices to cope with power outages that are caused by either bad weathers or scheduled load shedding. UPS (uninterrupted power...
How Technology Of Hard Disk Drives Has Evolved After Invention The journey of hard disk drive (HDD) technology began with the invention of first ever IBM 350 RAMAC hard drive in 1956. After passing through several...
Why ATM Eats a Card and How to Avoid it Technology has changed the money and banking system. Previously, where ledger books were used for keeping the records of accounts and transactions hav...

Add a Comment

Your email address will not be published. Required fields are marked *