Blogging

I read another great post by Darragh Doyle today about adding nicer looking comment buttons to your post. It was pretty helpful, but I didn’t feel I needed to have comment buttons mid way through my posts so I decided I would take inspiration from him but tackle it in a slightly different way.

As you can see at the end of all my posts I now have a nice shiny new comment button. I did this with a once off edit and I thought it might be useful to explain how I did it here for others who want to do the same.

Before we start, there is two main differences to note between this and Darragh’s method
This is a lot quicker and easier, but that comes at a price:
The button is at the end of every post automatically, so you can’t have it mid way through a post. If you wanted to do that you could use Darragh’s method for an individual post
Because it’s the same button on every post automatically, that means you can’t have different colours/styles for different posts

So here’s what you need to do…

Go into your blogger dashboard. Click layout. Then click edit HTML

You then need to click the “Expand Widget Templates” box like so.

You then need to find “data:post body” like this (this is internet explorer, other browsers will look different)

Clear a bit of space below it to put in your new code (hit enter a few times)

Copy this code here:

<p>

<span class='post-comment-link'>

 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<img src='http://xxxxxxxxxxxxx'/>

</a>
</span>

</p>

Paste it into the space in your template after “data:post.body”:

You’ll notice that the image location (img src) is just a load of Xs. You’ll need to replace this with the image location of your comment button. For my blog, I just copied Darragh’s! This is how I did it.

Open a new tab/window. Find the image you want to use. In internet explorer, right click on the image and press properties

Highlight and copy the image address. Then paste it into the template in place of the http://xxxxxxxx.

You should now have something like this (click to enlarge):
Click save template et voila!