Blogger Tutorial :: Add a Signature

Hi There! Today I am going to show you how to add a signature to the bottom of your Blogger posts. It is really easy and is a fun way to add personality to your blog!

First you need to create your signature. You can open up photoshop, paint, gimp, or any other image manipulation program. Create you signature with whatever fonts and colors you want then save it as a .jpg.

Here is an example of a blog signature I just created for my friend, Kim. It is 320px x 70px. Which is about the biggest I would suggest you make a blog signature. It should range from 100px – 320 px wide and be about 50px -75px in height.

Here is what it looks like on the blog…

After you have created your signature then you will need to upload it to Photobucket.

Login > Upload > and select your signature .JPG.

Once it has uploaded hover over the image and a little box should pop up. Highlight and copy the Direct Link code and paste into a word document, you are going to use it in just a minute.

It will look like this…

Next login to your Blogger dashboard. Click on Template and the edit HTML.

When You click Edit HTML Blogger is going to pop up a warning box. Just click “Proceed”.

[I Promise we aren’t doing anything to scary!]

Now you will need to check mark the box that says “Expand Widget Templates” in the top left hand corner.

Click your cursor anywhere in the text box and then click Ctrl F or Command F [for mac]. You should see a “Find” box on your screen. Mine is at the bottom of my screen …

Then paste the following code into your “Find Box”

<div class=’post-footer-line post-footer-line-1′>

Once you find that piece of code paste this code BELOW it, once the next line.

<img src=’IMAGE URL HERE’ style=’border: none; background: transparent;’/>

Then switch over to your word document and copy the direct image url of your signature [that you copied earlier]. Paste that into your HTML where it says IMAGE URL HERE.

Do NOT erase the quotation marks.

My final piece of code looks like this…

<img src=’’ style=’border: none; background: transparent;’/>

Then you can click PREVIEW and make sure everything looks okay. If it looks good, then SAVE!
Now you have a beautiful blog signature!

 ps :: I originally posted this at the SNAP! Blog.

Related Posts Plugin for WordPress, Blogger...

Get Posts Via Email!


  1. Kate says

    Ugh! It didn’t work. This is the error I get when I hit “Preview”:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “src”.

    Error 500

    Kendra, any ideas on what in the world I’m doing wrong?

    Many thanks!
    xx Katie

    • says

      Hey Kate,
      I just came across this blog post and saw your comment. I don’t know if you have figured it out yet or not, but I think the problem you’re running into is because you need the double quotation marks (“) rather than the single (‘). Blogger is pretty particular about things like that. Also, make sure that you have an opening quote and a closing quote. If they are both closing or both opening then blogger won’t read it properly either. HOpe that helps!

Leave a Reply

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