How to add the author, time and comments link to the top of your Google blog - with a difference

This is an article, by request, about how to add the author, time of article and links to comments - to the top of your blog article. This is for Google blogs and bloggers only. Be aware that fiddling with a blog template can make it unusable, if you aren't careful. Make these or any changes to your blog at your own risk.

You might consider setting up a blog purely for testing purposes if you're going to be making a lot of changes over time. You can copy your template from your main blog and mess with it to your hearts content, before making changes to your main blog.

Step 1: Backup before you change anything

Before you make any changes, back up your template.

Go to your blogger dashboard and click template. In the top right hand corner, you'll see an option to backup and restore the template. Click it.

You'll then have two options. Click on "Download full template" and save it to a folder of your choice (where you'll easily be able to locate it again).

If you mess up, you can upload the template file you saved and your previous template will be restored.

Step 2: Adding the author, time and comments link

Now go to the PTE Tech website and follow the instructions. Note there are two pieces of code that you need to add:

1. XML code that contains the instructions to insert the text, icons and links and
2. CSS that hides the date stamp up top (optional)

Tip: If you have an HTML editor, open the template you downloaded and save it with a different name, so you have a test copy while keeping the original safe. I found I could search the downloaded template file much more easily for the bits of code that you need to find. Easier than trying to search the template in blogger.

Search for the lines where you are instructed to insert the code and make a note of the line number. The line number should be the same in the blogger template as it is in the HTML editor version.

If you prefer to edit in blogger, position your cursor somewhere in the code and press control-f (on a PC, I don't know about a Mac) to open up the search box inside the blogger code itself. If you just use the template editor in blogger, still make a note of the line number so that you can find it easily again.

Step 3: Make sure the template works

Before you move to the next step, make sure you save the template and check it is working as it should. The icons and text and links should be close to what you see at the top of this article. Though not exactly the same.

Step 4: Customise the comments link by adding a link to the first comment

The code from PTE Tech provides a link on the right hand side, that links to the comments box. That makes it easy for people to make a comment. It takes you below the very last comment. But what if you or your readers just want to skip over the article and read the comments from the beginning? From the top of the comments, the first comment - not the last comment.

It took me a little while, but I figured out how to do that. Now that I've worked it out, I'll make it easy for you.

Before you do this, you can test the finished product here on this blog. The link at the top of each article, where it says "Add a comment" or "Feel free to comment", takes you to the comment box. Just to the left of it is a link that states the number of comments. The link to the left of the comment icon will take you to the first comment in the thread. (If there aren't any comments yet, just skip to another HotWhopper article that does have comments to see how the links on the right hand side work).

If you want to add a link to the first comment above your blog article, this is what you do.

First, here again is the XML code as provided by PTE Tech (not the CSS script you added - you don't need to change that). I've split it to show which bits of code relate to which areas - the author side and the comment side.

This is the code for the left hand side - author, time and icons:

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mg3s5lY8oyWLsMvz1_q4-97HvDAQgkQmh6vjTbBAahtCYEQWPfiWx8uDBw3GXrQ_ca65U8auxLoRHQi6Q9Ej8qU0n76PLMM_me0WpwvrUL5Oat41saeONBHj7szQjfcx-etbq6FASfXO/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:14px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh40QWDBc9Ld-FHH1YQBiOpiMEl18FQuX39Y4uIUqAe9C5kSjHuE6liUkrxpDzuBZgDVrNg6ELwNq5QPvk_wF5IEUP2y0zqUO03iZl_QaPwSBmezgtuk5LSVk7C84gbpH89-4EywNnxeP1-/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:14px;'><data:post.dateHeader/></font>

This is the code for the right hand side - a comment icon, number of comments and a link to the add comment box:

<span class='post-comment-link' style='Float:right;'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijYIz6ZyBxUA4uVF7tAkmR4MvqSAvxceszZogqQqf3HbtgagTBKzBgm4BjwIRztUt9R3cGvfNw2B3AA79a3ugy2CD1fbZ6CvLxfQlig37tBaepORzP7fMoSwab2ZrB9C-sCcrpQrHg8gDT/s1600/comment-icon.png) no-repeat scroll top left;padding-left:25px;font-size:14px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
</span>

Leave the first part of the code as it is in your template. That's the author and time etc. You will be replacing the second block of code for the right hand side that relates to the comments - with this:

<span class='post-comment-link' style='Float:right;'>

<a class='comment-link' expr:href='data:post.url + &quot;#comments&quot;' style='background: no-repeat scroll top left;padding-top:5px;padding-left:25px;font-size:12px;'><b:if cond='data:post.numComments == 0'> <b:else/> <b:if cond='data:post.numComments == 1'>One comment so far. <b:else/>Go to the first of <data:post.numComments/> comments. </b:if> </b:if></a>
               
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7P6rETGhyphenhyphenkPBBrSwLt-22kVAz7SZMy1evCgTlOpiEoGH1rADMDxY6mvAn79we8Uy8phP9SmqqQYln8xcxpYcPhNtHBiyMV5APxs5zWVBLUTx4gfMQtgWKCscLMnkcWk6RyzNpNrGBz4Cd/s1600/commenta.png) no-repeat scroll top left;padding-top:5px;padding-left:20px;font-size:12px;'><b:if cond='data:post.numComments == 0'>Feel free to comment!<b:else/>Add a comment</b:if></a>
</span>

Make sure you select all the code that is to be replaced and copy and paste the full code above in its place. The code is surrounded by span tags. (Copy it into notepad or similar, and compare the first and last lines, if you want to be doubly sure.) Make sure that you don't change the first part of the code that is for the author and time stamp.

Step 5: Save, check and you're done

Then save your template and make sure it's working. If it is, you can clean up the template by getting rid of blank lines. (I added blank lines so you could see the code more clearly.)

Notice that I've changed the icon file to face the opposite way. If you prefer the original comment icon, just replace the image file link in the replacement code, with the image file link in the original code.

I've also made the text a bit smaller, and moved the icon up a tad. This was to more clearly separate the two different links.

That's all. Not too hard, was it :)

Reference and Acknowledgements

Put Date, Name and Comment Counts under Post Title by PTE Tech