How to Display a Comment Link with Post Title in Blogger

Do you think hiding post footer from your homepage is a worst case scenario? No it isn't if you feel it's bothersome and taking a lot of space from homepage. So you will show only snippet of post with a link to actual post page using jump breaks or just full post. But with the hidden post footer, you will hide most of elements related to posts which are crucial to the particular post such as published date and time, author name, related labels, number of comments. We discuss how you can show off author, labels, date and time via How to Display Post Author, Date/Time and Labels post. But comment link was missing there. You don't need to confuse your visitors without showing a way to comment on your blog. How you gonna show comment link then?

Anyway you don't need post footer enabled on homepage to display comment link. You can take control of it by tweaking your template code. Therefore I'd like to show the way how to display comment link along with the post title. So it doesn't matter you show full post or snippet of post on homepage using jump break feature. And still visitors able to find how many comments you had for particular post and click on it if they need to comment on your posts too. Interested? Let's take few steps to learn about customization.

Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Now navigate to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.

5. Tick on, Expand Widget Templates.

6. All you have to do is copy and paste following code snippet to your post header to display comment link. Before place it on header, let's find out what changes you can do for this snippet to take most out of it.

<b:if cond='data:blog.pageType == "index"'>

<span style='font-family: verdana; font-size: 2'>

<a expr:href='data:post.url + "#comments"' style='float: right'>

<b:if cond='data:post.numComments == 1'>1 <data:commentLabel/><b:else/>

<data:post.numComments/> <data:commentLabelPlural/>

</b:if>

</a>

</span>

</b:if>

Color Indication Information:

   - Conditional Expressions

Conditional expressions which enables displaying comment link only on your home/index page. If you wish to display comment link even on post pages, just remove both lines.

   - Font Family of Comment Link

You can change font family of the comment link by changing value here. If you prefer having default text format, just remove this value with regarding attribute, face.

   - Font Size of Comment Link

If you specify comment link on the line of Post title, comment link will inherit Post title font size and you may feel it's larger for comment link. So you can specify the font size of the comment link here. Else if you specifying it on another line which has smaller or prefer font size, you can just remove this value with related attribute, size.

Note: If you are not specifying font face and size values, it is recommend you to remove both <span> tags to avoid inconsistencies.

   - Comments Division HTML ID Value

This is your id attribute value of comments division HTML element. It can be any unique id value specified within your comment form HTML elements on post page which link will navigate to. By default Blogger comment form on post page started with below line,

<b:includable id='comment-form' var='post'>

So I have specified it's id value comment-form here. if you are familiar with HTML and need to navigate link to another place, just add related HTML element id value here. Else make this no change.

   - Link Style

This specifies style of your link. Here it specified to be floated to the right, which is useful if you are displaying comment link with right aligned to the post title. Else if you need to show it up left aligned, you can remove this or change attribute value as, float:left.

7. Now you can add above snippet by selecting one of your choice below. Here I will do changes which are must do according to the placement of snippet.

Display Comment Link Below the Post Title

Search for below line in your template and add the code snippet just after it with your preferable changes.

<div class='post-header-line-1'/>

Display Comment Link with the Post Title, Right Aligned

i. Find below code in your template.

<div class='post hentry'>

ii. Find out lines with <data:post.title/> layout tag, starting from <div class='post hentry'> line to <div class='post-header'> line. You will find first 4 lines with <data:post.title/> tag as below,

<a expr:href='data:post.link'><data:post.title/></a>

<a expr:href='data:post.url'><data:post.title/></a>

<data:post.title/>

<data:post.title/>

iii. Now copy and paste comment link coding at the end of the each of 4 lines mentioned above.

i.e: <a expr:href='data:post.link'><data:post.title/></a>[Comment Link Code Snippet]

8. Now Preview for made changes and Save template after confirming the comment link on post header.

Enjoy :-)