How to add a signature to your blog posts (updated Aug. 2012)

This blog secret tutorial will show you how to add a custom signature to your posts!  Adding a signature to your post is fun and easy.  I think it makes your blog a little more personable too! Once you design your signature be sure to save it as a png.  If you save it as a jpeg there will be a white box around your signature.  Once you save it upload it to a free image hosting site.  I like to use Image Shack.

1.) If you are logged onto your blog and viewing it click on the ‘design’ tab in the upper right hand corner.

2.) Click on ‘Settings’ and then ‘Posts and Comments’.  Then click on ‘Add’ button next to Post Template.

 

3.)  A box will pop up.  This is the box you will add the following code:


post signature

4.)  Replace the SIGNATURE URL with your direct link image from wherever you hosted your signature.  Click on the orange ‘Save Settings’ box in the upper right hand corner.

*Your signature will not show up in past posts.  When you do a new post from now on it will always show up at the bottom of your post!! Leave a comment and let us know if you like this tutorial on: How to add a signature to your blog posts!

77 Comments

  1. Just wish to say your article is as surprising. The
    clearness in your post is just nice and i could assume you
    are an expert on this subject. Well with your permission let me to grab your feed to keep updated
    with forthcoming post. Thanks a million and please keep up the
    rewarding work.

  2. Hi,
    I followed all the steps but nothing shows up when I make a new post.
    Do you have any suggestions as to what may be happening?
    Thanks,
    Cheri

  3. I did all of the steps but at the end, once I saved the changes, under the box it says, “Your HTML cannot be accepted: Tag is broken: IMAGEALT=”POST” …. And ideas as to why? I’m not too great with all this code stuff unfortunately.

          • If the border is showing up around your signature then it sounds like you need to change your border color to transparent. To do this go to your ‘Layout’ page and click on ‘Template Designer’. Then hit ‘Advanced’ and find ‘Border Color’. Highlight the color box with the drop down and mark the box that says ‘transparent’. Be sure to click ‘Apply to Blog’. Let me know how it turns out!! —Becky

  4. Hello. First of all, I thank you for all your freebies and tutorials. Today I decided to create a signature into my blog posts. I followed your instructions to the letter, created a .png file in photoshop, uploaded this to Flickr. I used the code above: , replacing signature with direct link to my file on flickr. I have tried several test pages and only get a broken link to my signature file.
    Any chance you have having trouble with the code again?
    Thanks for your help!

    • Hi StephH! We aren’t having any problems with the code…sorry! I’m not sure why it won’t show up for you. I’ll email you and see what I can do to help:) —Becky

  5. This blog is great and I am soo happy that I finally got to customize my blog to my liking. The steps are pretty easy and it was hard to figure out my way. Thank you so much xoxo Tara

  6. [email protected] on said:

    I LOVE your site!!! I followed your instructions and my signature defaults to the top right, before the body of my posts. Is there any way to set it to show after posts? Thanks so much. -Kathryn

    • Hi Kathryn, when you go into your post just be sure to start typing before you signature. You can drag the signature to the bottom of your post. Hope this helps:)

  7. I can’t get my signature to work. I’ve followed all the steps….but what exactly is a direct link? In Image shack there is a code for forums, code dor websites and code for email. I have tried all of them and still signature does not work. Am I supposed to look somewhere else for the direct code? Please assist. Thank you.

    • Marie, when you upload your signature image to image shack you will see a few codes. You want the code next to the box that says ‘direct link’. The other codes won’t work:)

    • Hi Emily, when you go in to do a new post just drag the signature image down to the bottom of the post. On future posts just be sure to always start typing above the signature image.

  8. THANK YOU SO MUCH!! I’ve been looking around forever for a way to add a cute signature on my blog, and your tutorial is by far the simplest, most clear, concise, and to the point one I’ve seen yet! I’m going to set it up tonight! I’ve been perusing your blog in general, and you ladies run a fabulous blog! definitely in my bookmarks menu! :) xoxo

  9. Thanks for the tutorial! But what site did you use to create you signature, and how did you put an image beside the signature.
    Thanks! :)

    • Hello Deea,

      If you are only a contributor on a blog, you can create your own signature image still, and then just upload it individually under each blog post you do. It takes a little extra time, but there you have it!

      Ashley

  10. For some reason, Blogger will not let me drag my signature down to the bottom of the post. It also won’t allow me to type before the signature either. Not sure if this is bc of the new interface or what. Any suggestions?

    :)

    • Hi Sara,

      It looks like you have figured out the answer to your question. I looked at your blog and your signature looks great!

      Thanks,
      Ashley – TCBOTB

  11. I simply want to tell you that I’m new to blogs and seriously liked you’re website. Almost certainly I’m likely to bookmark your site . You certainly have fabulous writings. With thanks for sharing your web page.

  12. What website do you recommend using for signature hosting. I love the tutorial and how easy it is to add a signature, but my problem is where to go to make one in the first place? Where did you make yours?

    • Hi Serene! A free program to make your signature in is Pixlr.com. Then you can host it on imageshack.com (also free)! Let me know how it turns out! –Becky

    • Hey Lauren! To remove the border around your signature try this: Go to your ‘layout’ page adn then ‘template designer’. Then click on ‘Advanced’. Find the option for ‘Border Color’. Make sure you mark transparent and then click ‘Apply to Blog’. Let me know how it turns out:)! —Becky

  13. Hi. First of all, I just wanted to say thank you for making your tutorials so easy. I had a question about this one though. I did as you said with adding a signature but it shows up before the body of my post. Not at the end. Is there a way to fix that?

    • Hi Meghan, yes there is a way to fix it. You will just want to do your post like normal then when you are finished you can click on the signature and drag it to the bottom of the post. Hope this helps:)

  14. hey! i read your tutorial and thought it was very simple, buttt when i went to make my signauture, i got on microsoft word starter and tried saving it 10 times, then went to upload it onto my photobucket. i cant find it in my photobucket anywhere. i saved it as lots of diff things and it wont show up when i wanna upload.. didnt know if you could help with this or not?! thanks~

  15. Wow you have done it once more. Some wonderful info here. You have made me break my comment
    embargo, cheers :)

  16. HI I have a question, where should i place my singature? How do i even make one to put it on my blog????????????????????????????????

    • Hi Jenna, you can make one in pixlr.com or any other photo editing program. When you apply the code it will place the signature before your post. You will probably want to drag it down to the bottom of your post:) —Becky

  17. Thank you so much. I made my signature, and now my blog looks great! For any of those who want to check it out, go to lifeisbeautiful15.blogspot.com Thanks!!!!!!

  18. Great tutorial. Been searching the web and tried many different approaches. Did`nt get it to work, before I tried your tutorial.
    Wish all tutorials was as easy and intuitiv as yours were.
    Thanks=)

  19. HI– not working for me. Created my signature on pixlr- uploaded it to Image Shack, used the Direct Link & followed all the instructions..including the ones from all the comments as well =) I wrote another post…several…& still nothing shows up! Just wondering if the link is messed up again, but I am not getting any errors signs. I’ll try saving the signature a different way but just thought I would check.
    Thanks!

    • Hi Megan, make sure you copied the entire code….we haven’t had any problems with it! It sounds like you are doing it right too:)!! —Becky TCBOTB

Leave a Reply

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

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>