Thursday, August 27, 2009

Tutorial: How to Add a Signature to your Blog Posts

Have you ever been looking at a blog and see a fun signature at the bottom of each of the author's posts? And you wonder how they did it? Well, I am going to tell you!

First off, you need a photo editing program. I use Photoshop Elements as always (my favorite), but there are a few free ones you can download that are very similar for free. There is and Gimp that are great.

Okay here are the steps: (I am going to make one with you for this blog).

1. You need to create a new blank file:2. Now you need to select your settings. If you want your signature to have a clear background instead of a white box, don't forget to check the transparent option. These are the settings I use:
3. Now you will open your text tool (it usually looks like a "T") and your options will appear on the top of what font you would like. Choose the font you want. You can also choose the size, and make it bold or italic. It's up to you, play around with it -- and don't be afraid, you aren't going to mess anything up that you can't fix with "undo".4. So far so good! Now you can add whatever you want! A picture, a flourish, or just keep it plain-jane! It's up to you, be yourself, make it personal!

5. Now, if you want it to remain transparent in the background, you need to save it as a PNG file. However, if you are sticking to the white background or another color, you can just save it as a JPG.

Now it's time to add it to your blog!

Note: You are going to need an online host. I just photobucket. Your signature needs to be uploaded onto it so you can get an html code for it. For those of you who are new, photobucket is a free service and you can sign up here. If photobucket doesn't work for you, I found another one I like called Imageshack, that you can check out here.

Here are the steps to add it to your posts!

1. Go into blog settings page.

2. Next go to "Settings" and then "Formatting".

3. Scroll down to the bottom of the page and you will see a "Post Template Blox". Now you will need to copy the HTML code from photobucket of your signature and paste the code in this box.

4. Click on "Save".

Ok, it will look like this:

Now there might be two things that bother you that drive my nuts. 1. the fact the signature isn't centered. and 2. what the heck is up with that funky border!!

To fix the centering thing is easy. Just go back to your "settings" and "Formatting" page and add to the BEGINNING of the code you pasted and to the END of the code. There you go! However, if you like it to the left, just keep it, both ways look great!

Now here are the steps to get rid of the border (unless you like it):

1. Go to your "Layout" page and click on "Edit HTML"

2. Next you are going to need to find this section:

.post img {
border:1px solid $bordercolor;

(you can find it faster by hitting "Ctrl F" and typing in ".post")

Now you need to change the border 1px to 0px.

3. Just save it and ta-da! It will look like this!! Enjoy!


DDHA said...


Plus I found your blog really interesting and useful. Perhaps one day you will visit mine and, in so doing, achieve a state of inner peace you had hitherto assumed was unattainable.

Hope to see you in 'my followers' before too long.

Keep up the good work,


PS Si9nce you're the BlogLady and all: any suggestions as to how I can get the word out about this project and get it into the hands of more people who might enjoy it?

Anonymous said...

thank you so much!!!! I've tried other tutorials and they didn't work for me, so I'm excited to try yours!

Lydia said...

I made mine at it was even easier. but is there a way to add it once, and be done or do I have to cut and paste every post?

Mama Nut said...

No, you only have to do it once if you paste it in the box on your settings/formatting page like I have it here, and it will show up every time you post a post.

Mama Nut said...

Lydia, Yeah, I just checked out that link, it's pretty cool. I guess it all depends what the blogger wants to do :)

Anonymous said...

I tried this, mine would not work, what html code part of image are you using?

Andrea said...


You're the best!! Seriously, you rock! thanks for all the blog help!!


Anonymous said...


Amelia said...

Very helpful. It worked very well. All the steps are simple and concise. I would have never figured out how to do this without taking help from this post. Thanks !
digital signature PDF

Blog Widget by LinkWithin