How to Add a Signature to Blogger Posts

 

 

For 3 days, THREE, I looked up every article, tutorial, and how-to I could find on how to add one of those fancy signatures to the bottom of my posts. I tried ALL of them. None of them worked in their entirety.

Some that I tried were total fails. How the writer was able to succeed at it, I’ll never know. Some of them were partial successes – Sometimes my image was there, but it just showed as a tiny box. Sometimes my image was there, but it wasn’t transparent like it was supposed to be, or it had an ugly shadow behind it.

I tried editing HTML and adding CSS… I tried creating the image in Picasa, MyLiveSignature, and Pixlr… I tried getting from image from Flickr, Picasa, Photobucket… I tried HTML and direct links…

I thought that surely I’m not the only one who has wondered how to add a signature, or even tried and failed, so here I’ll share with you what worked for me and hope to goodness that it works for you also.

#1 Create your image

I created my image on pixlr.com, which is a free site. Hooray! Doesn’t require any downloading! Double hooray!! Across the top of the page, click “Pixlr Editor” then “create new image”.

You’ll see a window like this pop up.

 

You want your signature image width to be between 100px-320px and between 50px-75px in height. I made mine 200×75. Be sure to also check the “transparent” box because, unless your blog background is white, you want your image to be transparent.

 

Once you click “OK” you’ll see a grey checked box. The grey squares means your image will be transparent and you’ll only see your text.

Click on the text tool to add your text.

If you’re wanting more than one word and want different fonts/sizes/colors for each, you’ll need to click the text tool for each separately.

A text box will pop up where you can change the font, size, and color of the text.

To move your image around, click the little black arrow. To move the different layers, you have to click on the layer itself, which is located in one of the boxes to the right. If it’s telling you to “rasterize layers”, click on “layer” across the top, go down to “rasterize layer”.

 

When you’re done, save your image twice – once as a PXD (a Pixlr image) so you can edit later if you want to and once as a PNG, which will be the transparent image to go on your site.

#2 Upload your signature PNG image to Photobucket.com 

To do this, you need to set up a free account if you don’t already have one. Click the “upload” button in the top middle. Upload the PNG file you created then click on your image.

Then on the right hand side (ignore the ad with the older lady), you will see a few link options. Select the one that says HTML and copy it (Ctrl C). We’ll paste this code into Blogger.

#3 Open your Blogger dashboard

In the menu on the left, click Settings>Posts and Comments, then we’ll be adding something to the “Post Template”. You can see that mine is already there. Click the “add” button.

When the box comes up, type:

This will give you a few breaks before your signature so you have space to type your blog post above it.

Now, hit enter after that last
and hit Ctrl V to paste the HTML code into that box. You can even add a couple of
breaks after the code to leave a little space after your signature too. Then click “Save Settings” at the top.

 

Now you can test your image in a new blog post and click preview. If there’s a grey shadow behind it, follow step 4 to get rid of it. If there isn’t a shadow, then you’re done!

#4 Eliminate the grey shadow

My signature ended up in a white box with a grey shadow, and it was a bit annoying. Removing the shadow this way will remove the shadow from ALL of your images. I don’t know how to remove it from only the signature. If you know, please tell me.

Go to your dashboard. Click Template>Customize>Advanced, then scroll down to “Add CSS”. Then copy and paste this code into the box.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: none !important;

  border: none !important;

  background: none !important;

  -moz-box-shadow: 0px 0px 0px transparent !important;

  -webkit-box-shadow: 0px 0px 0px transparent !important;

  box-shadow: 0px 0px 0px transparent !important;

}

After you paste the code, click enter. Then “Apply to Blog”. This will make the shadow go away.

 

And now you should see your signature on each new post! This tutorial will only add your signature to NEW blog posts. It seems there is a way to add it to old posts by editing the HTML, but those tutorials didn’t work for me, so I’m just going to stick with this method.

I hope this tutorial has helped answer some of your questions AND that it works for you.

If you have any questions or additional comments, please let me know in the comment section below.

Thanks for checking out my tutorial!!!