"Keep learning ~~ keep smiling ~~ keep sharing"     

Thursday, November 19, 2009

Add a personal signature to your blog posts

So happy to be signing off my online blog posts finally. I've always wanted to do this but never explored or search further to find out how-to, since it wasn't one of my top priorities.

But blessings came unexpectedly when I visited a Blotanical member's garden blog two days ago for the first time! Not only was I treated to such an awesome garden display of kaleidoscopic autumn colours, but was introduced by chance to this wonderful site. It was while enjoying the spectacular autumn photos by Jan of Thanks for 2 day, that I playfully mouse over her personalized signature and viola it was a clickable image that linked to It's an online personal signature maker that offers free personal signature generator to create your own signature for emails, blogs and others, besides paid service for other advance animated choices. Wow, a treasure hunt that took no effort at all on my part. Thanks, Jan!

Thus, I thought it'll be great to share here my recent delightful discovery and how easily you too can add a signature to personalize your blog posts.

Follow these simple step-by-step process of creating and adding your personalized signature to your blog posts :

  1. Go to You need not register or set-up an account for its free service. Click on Click Here To Start or the Proceed button.

    Screen shot on a section of MyLiveSignature website, an online personal signature maker

  2. To create your new signature, click on the link, Using the signature creation wizard or its icon.

    Screen shot on 'Creating a new signature' for creating personalized signature

  3. Enter your name and click the Next Step button to continue.

    Screen shot on 'Enter the name' for creating personalized signature

  4. Select the font that best suits you. There are 120 different fonts available for selection. (My selection was #29, after going through all 120 of them...hehe, just curious to see them all!). Click on the Next Step button to continue.

    Screen shot on 'Select the font' for creating personalized signature

  5. Select the font size for your signature,  by clicking in the circle beside the size # you desire. Then, continue with a click on the Next Step button. (I've selected size #4).

    Screen shot on 'Select the size' for creating personalized signature

  6. Select the color for the text and background, and then click on the Next Step button to continue. For my signature's text color, I've selected #131313.

    Screen shot on 'Select the color' for creating personalized signature

    Some tips on background colour:
    • White - the default background color #FFFFFF is white. It's fine if that's your blog's background color, otherwise it'll create a box border, enclosing your signature and appear unappealing as seen in the photo below. To make it borderless, choose either one of the next 2 ways.

    • Choose the colour that matches your blog's background color - enter the colour hex code if you know or go to your blog's Dashboard | Layouts | Fonts and Colors, and get the color hex code of your Page Background Color from there. This will make your signature clearly defined without a border.

    • Transparent - tick in the box beside the word 'Transparent'. This is the best choice I've discovered after trying the previous two. Choosing 'Transparent' will automatically create a well-defined signature without a border and will fit all blogs, irrespective of the blog's background colour. An excellent choice if you have many blogs with different coloured backgrounds.

  7. Set the slope. 10 choices from #1, and #10 having the steepest slant. That's it...when you click the Next Step button, your signature is ready to be used.

    Screen shot on 'Set the slope' for creating personalized signature

    Screen shot on 'Finished: Signature is ready' for creating personalized signature

  8. Click on the Want to use this signature? link which will direct you to the generating signature code page where it explains the need for this special HTML code.

    Screen shot on 'Generating signature code' for creating personalized signature

    Click on the Generate HTML code link, where you will be provided with 2 options . You can either generate a code for just your signature alone, or generate a combine code of your signature with other additional information. I've selected the first option which is most suited for my blog posts by clicking on the Generate a code for my handwritten signature link. Once the HTML code of your signature is generated, you can then copy and paste the code into your blog posts. Advisable to copy and paste it too into any text editor like Notepad or TextEdit, and save file for later use.
    The website has also provided details on how to add your HTML signature in email messages, blogs and websites. Click on the respective links available to go about it.

    Screen shot on 'Generating HTML code' for creating personalized signature

Nevertheless, here's sharing two ways on how to add your signature to your blog posts :

1) How to add your signature to individual Blogger blog post :
  • Go to Edit Posts, then select the blog post that you want to add your signature;
  • Click on Edit HTML in the editor window;
  • Scroll right down to the end of your post, and paste the HTML code of your signature that was generated;
  • Click the Publish Post button when all's done.
2) How to add your signature to all of your Blogger blog posts (the past, present and future posts)
  • Go to Dashboard | Layouts | Edit HTML, to edit the blog's template;
  • Before editing your template, best to save a copy of it. Click Download Full Template;
  • Then check the box beside Expand Widget Templates.
  • Scroll down or CTRL F to find the code <div class='post-footer'> and then paste your HTML signature code right below it;
  • Then, click Preview to see whether your signatures were added and if all's well, click Save Template. Otherwise, click Clear Edits and try again.
    (Note: just to assure you that I've just tried this way and it's just perfect. A big thank you to for this very useful resource. Now, I needn't use the individual signing method as it's done once and for all, using BetShopBoy's way)
This personalized signature can be applied to LiveJournal and Wordpress, besides Blogger, as well as to forums, email messages and websites. Isn't that awesome?

My grateful thanks and appreciation to for this wonderful signing feature. God bless you all for your generosity! You've put a thousand smiles and a wide grin on my face! :-)


  1. Wow, that's a great discovery! Will certainly go on a hunting spree to look for a nice signature.
    Thanks for sharing.

  2. Thanks, dear friend.
    And happy hunting! ;-)

  3. Hi

    Just finished editing all the signatures, blog sure looks great.
    Thanks to you.

  4. You're most welcome! It sure is with that cute siggy of yours...nice artistic flair!

  5. Jacqueline, I just added my signature to my blog by changing the HTML code in my template, thanks to your easy to follow steps. Yahoo! I am so happy.

    By the way, how did you post the screen print pictures here?

  6. I just saw your siggy, Autumn Belle...real cute and cool! Congrats, you're a fast learner, great that you attempted the template'll give you more confidence now with HTML code, right?
    Re screen shots, I use the Grab Application that comes with my iMac to capture them, then save and convert to jpeg files in my computer and include text, etc in photoshop. To post here, I follow the same way as done with any other digital pics, ie using the 'insert image' icon at Compost mode of the Post Editor.
    I've previously used 'Skitch' a better alternative where annotations, arrows, circles, etc can be added to the screen shots, but I've yet to update my expired version to get it running again. I'm unsure whether it can be used on Windows pc but you may want to check it out here: to have an idea and find an alternative compatible tool for Windows, if Skitch is not applicable.

  7. Thanks for this very informative post that Autumn Belle pointed to in her last blog post. Can you get the signature created with MyLiveSignature onto a photo? Up till now I've been experimenting with doing it with IrfanView, which works but is a little complicated.

  8. You're most welcome, Barbara! I don't think that's possible because siggy created with MyLiveSignature are in html code. I'm not familiar at all with IrfanView. I simply use Photoshop to sign off my photos.
    Thanks for visiting.
    Have a lovely day!

  9. Great blog! Thanks for the blogger tips; I was wondering how to do a couple of these things; already added a couple to my blog and they worked great. I'll look around some more but I am also looking to add numbers to my comments in blogger. I've tried a couple tutorials and they never work out. It seems that the template I'm using might be part of the reason but typically it's a hard task in the newer version of blogger. I operate a review and giveaway blog so numbered comments would help me out greatly, instead of having to count every giveaway entry(comment) myself.

  10. Thanks for the thumbs up, This Lil Piglet! Frankly, I think numbering comments is cool but have yet to learn how to do that...maybe someday soon, I hope!

  11. hi Jacqueline:
    I tried this and the steps were just perfect. However, the signature appears after the "link within" scroll bar (and far away from the end of the post).. How to set this signature just after the last line in the post.. Pls do visit my blog and see if you can help !
    many thanks,
    Mom Chef

  12. Hi Mom Chef! I've spent more than 3 hours scrutinizing my blog's template (@ edit template), hoping to trouble-shoot your problem but am up against a wall! I think my template is corrupted...the Expand Widget Templates is not functional, so couldn't find my HTML signature code, etc.? Hence, unable to proceed to experiment. Sorry!
    Anyway, I've visited your blog and I would think that the positioning of your signature looks perfectly okay. To me, it's more meaningful as positioned now ie below the Link Within since you are the one introducing your other posts by 'saying' You might also like:....right?

  13. I just found your site today and I have to say I love it. Thank you so much for putting so many useful tips all in one location. : )

    It appears I am the only one having a problem with this. I have created two signatures. The first on with a transparent had a slight blue border around it when I added it to my blog. I then tried with a white background and it looked exactly the same with the slight blue border around it. It doesn't look good at all. The background of your page where you add your signature appears to be the same color blue as the "slight blue" I am talking about. I don't want a border...any thoughts or ideas?

    ps..When I look at the page in preview the border doesn't show at all and it looks great and then when I publish it shows. : /

    Thanks, I am sure I will back to you site often.

  14. Thanks for the thumbs up, A Vegan Goddess!
    Re your problem, you mentioned that you've tried with a transparent and a white background, yet both resulted with the same coloured border. So, I'm just deducing that it could be an issue with your browser? Have you tried viewing your created signatures with another browser?

    Moreover, my background at the post footer which includes my signature among others has been purposely coloured a light grey (#f2f1f2) not blue as remarked by you... so probably you've to sort out at your end what's causing your problem. Sorry, I'm unable to help further.

  15. Jacqueline~

    I also want to thank you for such informative tutorials & information! I am extremely new to blogging & in the midst of the learning curve right now so to find your site was a blessing. I am also having the same problem @Mom Chef is having. I tried to go to her blog to see if maybe she found a fix for it but was unable to gain access. I was curious if you were ever able to find out why this happens with the signature coming after the 'linked within' & 'print friendly' widgets? Your answer to her made perfect sense to me but it just looks so weird on my blog. There is quite a gap in spacing between the end of my post & my signature. I love my signature so much, and was hoping to find a fix for it. Thank you in advance for any information you may have on this topic.

  16. You're most welcome and thanks for your kind comments, StaceyAnne. Sorry, I'm unable to trouble-shoot and help solve your problem at my test blog as I no longer install the LinkWithin widget on my blogs. Nevertheless, revisiting an article I wrote previously on how the LinkWithin affects placement of Read More Link @ at paragraph 5, has given me some insights that may help.

    Do check the link out and probably you can try to modify your HTML template by adding the following code:

    <div class="linkwithin_div"></div>

    at the place where you want the LinkWithin widget to appear - in your case, place the above code below your HTML signature code if you want your signature to appear first.

    Hope this helps.

  17. This was soooo helpful. Thank you!

    1. Happy to know that, Jen! Thanks for your appreciation.

  18. Thanks a lot for the valuable information Jacqueline.
    This was really helpful for me. Thanks again.


    1. You're most welcome, Suntaragali! Happy to know my article was useful for you.

  19. Excellent. This is the best article which explains all the steps to add signature to blog post in detail. I do appreciate you for the way you have simplified this process. Very helpful.
    digital signature software

    1. Thank you for your generous comments, Jimmy.

  20. i am having a problem with signature html code insertion .plz help me

    1. Hi. Kindly read and follow the steps carefully. This offers the personal signature generator for free.
      Hope this helps.


Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search