The Nut House has moved to a new url. Please update your bookmarks and links and come check us out!

Saturday, January 9, 2010

How to Add a "Handwritten Signature" to Your Blog, A Tutorial (for blogspot only)

Have you ever read blogs where there it looks like there is a handwritten signature at the end of the post? I think they are pretty neat. They add a fun and personal touch to a blog. I found My Live Signature awhile back and started to add it to my blog but couldn't decide on which font to use. After chatting with another blogger today, I decided that it was time to take this off of my list of things to do and finally get it done.

I found a few other signature sites, but I like My Live Signatures the best. I think is the easiest to use with the most choices. In fact the reason it took me so long to get it done was because I couldn't decide what font I wanted to use. In the end I went in a completely different direction after finding one with Hearts on it. I am a sucker for Hearts :)

Since I use a blogspot blog, this tutorial is only for blogspot, I can tell you nothing about any other blog HTML.

To start out, visit the My Live Signature website and follow the simple directions to create your own personal signature.

You can customize the colors to match your blog. I used the same color that my text is here. I just went into my blog layout and good the color code from there.

When you are done, it will give you several different options on how to add the signature to different blogs. I like to add the HTML myself to make sure I get it exactly where I want it. It doesn't really say where the signature will be installed onto my blog, so I grabbed the code and did it myself. To choose your own code, on the My Live Signature website, after you have created your own "handwritten signature" click on the tab that says My Sigs. From there you can generate your own code to add to your blogspot blog.

Before starting any HTML work on your blog make sure that you back up and download your blog to your hard drive. If you mess anything up, you have not lost your blog!!

After you get your code for your signature you will need to go into your Layout, Edit HTML and click on Expand Widget Templates.

If you want your signature to be on the bottom left of your post you will need to find where it says:

    < div class='post-header-line-1'/>

    < div class='post-body entry-content'>
      < data:post.body/>

(It will look a little different, I have added a few extra spaces it it because I am not sure if it will change this post or not, I have added the space after the first < you can copy and paste my code here, but make sure that you delete that space. )

After you find that, you will need to find this:

      < div style='clear: both;'/> < !-- clear for photos floats -->
    < /div>

Add a few lines in between those two sections and that is where you are going to add the code from My Live Signature. I also like to add a paragraph < p> and a break < br> to give separation at the end of the post. You can mess around with adding paragraphs or breaks to customize your blog. don't forget to close the p or br with a / at the end of the code or it will not work.

After you add the code, this is how it will be placed:

If you want the signature placed on the right hand side of the blog post you need to add extra code to shift it over. You can add this code:

< div class="separator" style="clear: both; text-align: right;">

and don't forget to close it at the end of the signature code.

< /div>

The script will look like this:

And the signature will look like this on the post:

I hope this helps you! I have been helping other bloggy friends with all sorts of different HTML assistance, and some of them I have explained several times, so I thought I would publish my knowledge. This is my first published tutorial, so I hope I haven't left anything out. If you have any questions, feel free to ask and I will do my best to answer them. If you are really excited about this tutorial and feel the need to thank me for my time with a donation, I would be more than happy to accept it...


Tyler said...

Thanks so much girl. I will be working on getting me a signature up!! YAY I have always been so scared to mess with the HTML hopefully i will be able to get it figured out now! Thanks again :)

heather said...

thank you! i spent a long while yesterday trying to figure this very same thing out...and ended up with nada. i'm going to try this!

Lisa Curcio said...

If you try this out and it works for you, or doesn't work, please let me know so I can fine tune my tutorial. Something like this is easy for me, I want to make sure that I have explained everything as simply as possible and have not left out any important steps.


Tyler said...

The extra pic you added.. helped me alot!Once I found the spot in my HTML I was good to go! Thanks again

Helga said...

Thanks for the step by step Lisa. I have been trying to get a signature on my page forever but couldn't get how to add the html to my template. How did you learn this stuff?? HTML is a big mistery to me....I don't get it or how you can understand it :o) Thanks again!

Blog Widget by LinkWithin