Tuesday, 18 December 2012

How to Add a Signature to Blogger Posts

Pin It!


I have a number of things on my blog to do list relating to how it looks and improving reader experience, but the challenge is finding time to cross them off. One of the things I can finally strike off my list is adding a signature to my blog posts. I really like it when bloggers sign off their posts with their name - it just makes it feel a bit more personal! 

Whenever I make a change to my blog - like when I added my project galleries - I inevitably get emails asking how I did it. Which I don't mind at all because I love helping people, but it can be time consuming to reply to all those emails. So to preempt the questions about how you add a signature in a Blogger blog post, here is how I did it.

Creating the signature

Of course, you can create your own image to use in any sort of graphic programme like Photoshop. But the easiest and quickest way, in my opinion, is to use  My Live Signature

Step one. Find the signature creation wizard (this is actually the hardest step because the website is deliberately laid out to make it confusing as to what is content and what is an ad - boo!) 

When you have found the wizard, type in the name you want to use:




Step two. Click next step and choose the font you want to use. There are literally dozens to choose from.


Step three. After picking your font you choose the size. I used #5.


Step four. The final steps are to pick the colour of your background, the colour of the text and the slope you want on the signature (I chose 2). 

I then saved my signature to my computer with the old right mouse click and "save image as" method. But My Live Signature will also host the image for you if you prefer. In this case you would need to click on the link that says "want to use this signature?" and then select "generate HTML code".


Adding a signature to your Blogger Blog Posts

I host all the images from my blog on Picasa and got the HTML code from under the photo information on their website, (I checked the "image only" box and copied the "embed image" text). But for the purpose of this tutorial, I'm going to assume that you have followed the method above and used My Live Signature to generate the HTML code you need. 

Step one. On the Blogger dashboard go to settings/posts and comments. This will bring up a page that looks like this:



Step two: Copy the HTML code for the image location and paste it into the box where it says "Post Template".


Step three (optional). If you are using My Live Signature to host the image and generate your HTML code then you might want to replace their web address with the URL of your blog instead.

Done! Every time you write a new post from now on your signature will show up at the bottom. 

I think that covers everything, but if anything is unclear please leave me a comment and I'll do my best to answer your question.



You may also be interested in:
Project Gallery
Project Gallery Tutorial

27 comments:

  1. Thanks so much for this! It's going on my bloggy to-do list. :)
    Hopped over from Bowl Full of Lemons!

    ReplyDelete
  2. Wow! That is really great! Do you know if this would work on Wordpress? I am your newest follower on G+. Hope your day is great!

    ReplyDelete
    Replies
    1. Glad to have you as a follower - I only added G+ today so I'm pleased people are using it :)

      The HTML generated by My Live Signature can be used on any blog platform by adding the code to your site template. This site explains where the code goes on a Wordpress blog:

      http://lorelle.wordpress.com/2007/04/10/adding-a-signature-to-personalize-your-blog-post/

      Hope that helps!

      Delete
  3. I've never seen this method before...didn't know there was a signature creator. Very neat.
    KC

    ReplyDelete
  4. thanks! I just added it to one of my blogs :) Now I really need to write a post....I'm so behind!

    ReplyDelete
  5. Thank you for this great tutorial. I tried it bevor and it never worked but with you help I finally could do it.

    ReplyDelete
  6. Didn't know about My Live Signature - so easy to use! Thanks for the tip.

    ReplyDelete
  7. That's great! Thanks for the tip; I'm going to try it. Soon. :)

    ReplyDelete
  8. Hi, this worked for me because everyone else was having you add HTML to the post or body and I got lost - this worked ...but it keeps my signature at the top of the post not at the bottom and I have to play with it a bunch to move it to the bottom- is there a fix?

    ReplyDelete
    Replies
    1. Hi Kelly,

      Try adding the following HTML before the rest of the code in the post template:

      <br />
      <br />

      When you go to compose a post after this, there should be a gap at the top where you can start typing (without having to mess with the position of the signature first).

      Hope that helps, if not drop me an email (under "contact" at the top of the blog) and I'll see what I can do.

      Delete
  9. Angela,
    This was so helpful, as are all of your posts. Thank you, I am a new follower.
    Have a great weekend.
    Wanda Ann @ Memories by the Mile

    ReplyDelete
  10. This is great! I'm always forgetting to add my signature to my blog! Check it out here.

    ReplyDelete
  11. Thank you for this tutorial! I came to your blog via The Trendy Treehouse link party and am a new follower of yours. Blog design is so confusing to me and you have made it clear and easy to understand - finally!
    I'll be back many times :-)
    Merrick @ MerrickDesigns.com

    ReplyDelete
  12. Hi Angela,

    Thank you for the tutorial. This was super helpful! I only have one tiny problem -my image has a light gray border surrounding it, even though the border value is 0. (Almost like a shadow effect. I've tried looking at my template to see if anything there is was contributing to this, but I have transparent setting as for as I can tell. Any thoughts?

    Thanks,
    Laura

    ReplyDelete
    Replies
    1. I'm not sure if I somehow missed this question, or replied via email (as I sometimes do). But for the sake of other people who may read this question and are having the same problem, this tutorial should fix it for most people:

      http://www.atypicalenglishhome.com/2013/04/how-to-remove-border-of-image-in-blogger.html

      Delete
  13. I followed your instructions...is the signiture suppose to come up after I saved it and appear on all of my previous posts or start appearing on my next post? Thanks Hannah :)

    ReplyDelete
    Replies
    1. Hi Hannah. It will only show on posts you create from now on, and not your previous ones.

      Delete
  14. I have another question, sorry! I thought I could figure it out, but alas. If I want to use an image I made in Photoshop, how do I get it to know what file I want to use? What more do I need to do besides img src = signature.whatever.. Do I need an actual path or something? Hope that makes sense.

    ReplyDelete
    Replies
    1. You need to upload it to an image hosting site. Since you are hosting yours on Blogger, you can do this by adding the picture you've made into a blank post (which will automatically add the picture to your album). After that, you can link the image from Picasa.

      Look at step three on this tutorial, it may help:

      http://www.atypicalenglishhome.com/2013/05/customise-your-sidebar-titles-in-blogger.html

      If you are still having problems, drop me an email and I will send you a lengthy reply.

      Delete
  15. Angela, when I made my signature there is a box around it. Is there a way to get rid of it?

    ReplyDelete
    Replies
    1. There certainly is -

      http://www.atypicalenglishhome.com/2013/04/how-to-remove-border-of-image-in-blogger.html

      Hope that helps. :)

      Delete
    2. Angela, you are the best!! Thank you!!

      Delete
  16. Thank you! I love your information and the way you lay it out makes it easy to implement!

    ReplyDelete
  17. Angela,

    I found this through Pinterest. Thank you for this information. So easy!

    Nicolette

    ReplyDelete
  18. Olá novamente aqui de portugal bem aqui no teu blog tudo me interessa, eu gosto de ver um blog com uma assinatura, acho que fica mais personalizado e bonito, dá uma maior interacção com o leitor, como nunca consegui colocar, também desisti, antes de escrever, vi também pode se interessar galeria das suas publicações isso para mim era optimo, mas não vou ver se não não publico nada no meu blog e como só tenho até está quarta feira que vêm, o blog vai ter de ficar assim, depois logo se vê, só há uma coisa não gosto muito de usar o picasa, para mim é uma complicação uso mas só em ultimo caso, o fotoshop não sei mexer uso aqueles que a web dá gratuitos.

    ReplyDelete

Thank you for taking the time to leave me a comment. I try to respond to as many as possible. :)