Tuesday, June 15, 2010

Teach Me Tuesday - Blog Signature

Well, I did it! I finally figured out how to get my signature to work the way I wanted it to. Now I'd like to teach you how!

Step 1: Create your signature image
You can do this in your art program or you can use an online signature creator like My Live Signature or Font Image Generator. Both programs are free to use and you don't even need to register, but I've found that My Live Signature works best on solid color backgrounds (even the transparent ones). For mine, I used Font Image Generator, but for Rose over at 2KuteKreations, I used the My Live Signature.

If you use MLS, they have a Wizard that walks you through all of the steps. It's very simple to use, but the transparent image just didn't work right on my blog. FIG is a little less user friendly, but this one seems to like my blog better. To make your image transparent using FIG, click the crown and select either PNG or GIF and set transparency to YES.

Just a little tip - but I picked my text color by clicking the new TEMPLATE DESIGN feature in Blogger. Then I picked a color that was already featured in my blog and copied the # code (I used the link color for mine).

Step 2: Formatting your new signature on your blog
If you used MLS, they have a handy little feature that generates your html code for you. Simply click 'use this signature' link and the 'html' option and then the 'generate your code' and it will pop right up for you. Simple enough!

If you picked FIG or you created your own signature, you will need to save the file and upload it somewhere (ie - photobucket). Once you've done that, you can use the generated html code from photobucket to add the image to your blog.

At this point, I used my most recent blog post to test my new signature. I pasted the code in and hit the preview button. My signature showed up like this:
I hated that stupid little box around it and it took me FOREVER to figure out how to remove it. The box is called a Drop Shadow. And if you don't know html coding, it can take you even longer to figure out how to remove it than it took me. So how can you get rid of it?? By making your html code look like this:

<img src="YOUR IMAGE URL HERE" style="background: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;">

So now your signature will show up like this:

Step 3: Setting your signature to automatically add at the bottom of your posts
Want to make it so that you don't need to manually add the signature code at the bottom of your posts every time? That's easy! Simply head over to your Blogger Dashboard, go to Settings and then Formatting. Scroll to the bottom of the page and you'll see a text box. Add your new signatures html code to this box and click save. And that's it! The next new post your create will have the html code already in it. Just click New Post, and type above the html code!


  1. Looks amazing! And thank you so much for the step by step guide. I will give it a shot as soon as I have a moment to myself.

  2. Hmmm... I wonder if I am capable of this? Maybe I will give it a shot?

  3. Well I did attempt this & got it to work on Blogger. By any chance do you know how I can do the same thing but in "Live Writer"? I write all my posts in Live Writer... so my siggy won't show up there :(

  4. Great Blog girl!!! I love this little tech tip.. Gonna "try" it soon. Following you back:)

  5. Thanks you...It was much easier than I thought. You made it simple!

  6. This comment has been removed by the author.

  7. The signature creation process seems to me easy. This tutorial taught me and helped me to create a signature for my blog. By following this article all things worked well.
    electronic signature