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.

Tags: , ,

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Visit Us On YoutubeVisit Us On TwitterVisit Us On FacebookVisit Us On InstagramVisit Us On PinterestVisit Us On Linkedin