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:

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

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.

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

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!

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.

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

It just came to my mind to add a signature, so I searched for this and come to know that how easy it is. its just easy because the peoples like you.
thanks a lot
Nehahttp://beautitipscollection.blogspot.com

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!

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?

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.

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?

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

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

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