How to add a signature to your blog posts (updated Sept. 2013)

This blog 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!  The great thing about this code is it will add your signature to your older posts and your new ones!

Once you design your signature be sure to save it as a png.  Pixlr.com is a good free program you can use to design a signature (click on ‘Open Pixlr editor’ and ‘Create a new image) .  Once you save it upload it to a free image hosting site.  I like to use Image Shack.

1.) When you are on your ‘Layout’ page click on ‘Template Designer’.

2.) Click on ‘Advanced’ and then ‘Add CSS’.  You will want to paste this code in the box:

.entry-content:after {
content: url(INSERT-YOUR-IMAGE-URL-HERE);
margin-left: 200px;
}


4.)  Replace the ‘INSERT-YOUR-IMAGE-URL-HERE’ with the url of your signature you uploaded to your image hosting site. You can also change the number 200 to be higher or lower depending on if you want your signature aligned left or centered.  After you are happy with the placement of your signature, click on ‘Apply to Blog’ in your upper right hand corner.

This is the finished look after I applied my custom signature!

 

For more signature ideas take a look at these! You can have our custom design team design a signature for you!!

 

79 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.

  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

  7. 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

  8. 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

    • 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:)

  11. 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.

  14. 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

    • 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

  20. 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

  22. 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.

  25. 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

  29. 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:)

  30. 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~

    • 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

  45. 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=)

  46. 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

  47. Thank you everyone for your comments!! As of September 2013 we updated this tutorial on how to add a signature to your blog!! Have a great day!
    Becky & Ashley

Leave a Reply