Wednesday, 29 December 2010

Tutorial: how to create a signature for your Blogger posts

Hello Lovely Planetarians! I hope you’re still enjoying the festive season with your loved ones. The Sydney-to-Hobart yachts keep streaming into Hobart – the old girl is abuzz. Back on PB, the pixies and Mr PB are all sleeping soundly. And I’m still feeling a little Christmassy. This post has been rattling around in my head for a while since I lent someone a hand. How about I give you a belated Christmas present and share with you something I’ve learned – how to automatically add a fancy signature to the bottom of your Blogger posts.

Creating your signature

I created my signature using MyLiveSignature at (I have no affiliation with this free website). Now, please don’t be daunted by the numerous steps involved – I’m taking your hand (here’s mine, see?) and walking you through it. Okay?! Let’s go!

1. Click on Register your details to create a new account and then use them to log in.

2. Click on the top tab ‘New Sig’. You have three options from which to choose – using the signature creation wizard, hand drawing your signature or using a scanned image. This post only deals with ‘using the signature creation wizard’ so left click on that hyperlink.

3. Enter a name for your signature – I’ve chosen ‘Jane’. Click ‘next step’.

4. Select your preferred font. I’ve chosen font #1. Click ‘next step’.

5. Select your preferred size for your signature. I’ve chosen size #3. Click ‘next step’.

6. So now you’ve worked out the font and size of your signature. Next, you have to choose its colour.

See where you need to insert the codes for the colours of the background and the text? To make the signature consistent with the rest of your post, you need to use the same colours you use for your posts.

If you don’t follow these extra steps, your signature will ‘stand out’ from the rest of your post as it will be encased in a box with a different coloured background to your post text. That’s not going to look as professional and fancy as it could.

Okay, so let’s keep going – squeeze my hand. See – I’m still here with you!

7. To find the colours of your post background and post text, open a new tab with your browser and go to your blog.

8. Open 'Design', then 'Template Designer' and then 'Advanced'.

9. Click on 'Background'. The code in the second option, 'Main background', is the colour of the background of your posts. Grab some paper and write that code down – mine is #f4f7ff.

10. Click on 'Body text'. The code in 'Text colour' is the colour of the text of your posts. Write down that code – mine is #1e4263.

11. Now return to Step 4 of MyLiveSignature and paste your two colour codes written on your piece of paper into the boxes requesting the 'background colour' and the ‘text colour’, just like I have. Still with me? Good! Click ‘next step’.

12. Choose the slope for your signature. I’ve chosen slope #1. Click ‘next step’.

13. Choose a name for your fancy signature. I’ve chosen ‘Jane’ (inventive, I know!). Click ‘Finish’. And hey presto! You’re now the proud owner of the *fanciest signature in town*!

Now let’s insert it into your Blogger template so it’ll turn up automatically at the bottom of your draft posts. Squeeze my hand again and let’s go!

Using your signature

1. Now in MyLiveSignature, click on the top tab ‘Use sigs’ and then ‘Generate HTML code’.

2. Left click on ‘Generate a code for your handwritten signature’. Select the name of your signature (you may eventually have several choices so hence the prompt) and right click ‘Generate code’. Then this box will turn up.

3. Here’s the lovely HTML code you’ve worked so hard to create. Left click and highlight all the code. Then right click and hit ‘copy’.

4. Now open a new tab with your browser and go to your blog. Click on 'Design', 'Settings' and then 'Formatting'.

5. Scroll right down to the bottom to the empty box under 'Post Template'. Right click and then hit 'paste' to insert the HTML code from MyLiveSignature.

6. Click on 'Save settings' and voila! Now your *fanciest signature in town* will appear at the bottom of every ‘new post’. Just magic.

7. To check that it's working, click on 'New Post'. If the signature is attaching properly, it will load up in your new post before you start typing.

Just move the cursor to the left of the signature and return a few times to make the space to type your post.

When you've finished your post, make sure there aren't any extra spaces under the signature as that will leave a blank space at the bottom of your post.

So, now you can let go of my hand!

I hope this little Chrissy present is useful. Do let us know if you’ve mastered it so we can admire your handiwork!


  1. Hadn't thought about this before...but think I NEED one on my blog now! Certainly didn't know there were free websites out there that do it for you...thanks for this little tute:-)
    hmmm, I wonder what other snazzy little things I need??

  2. Thanks Jane! I have been wanting to do one for ages, now I know how!

  3. Yay! I did it!! I just set the background as transparent btw (so I didn't have to fuss with setting the colour) - such a great tutorial. Now I really am a 'stylish blogger' (tee hee)

  4. Thanks Jane! Just what I always wanted! Off to give it a go xx

  5. YOU are AWESOME! This is one of my blog goals for 2011 to create my own signature and you have done all the hard work for me - sending big love and *hugs* your way - Thanks so much. Naomi xx

  6. Thanks Jane, I will keep this post handy in case I ever need to re do mine.

  7. Great tutorial thank you!

    Like Cate I chose transparent for my background because it is a mix of colours.

    Now just need to work out how to copy it to a page I create on my iphone.

  8. I have always wondered how people make them!! Thanks Jane for sharing.xx

  9. Thanks for sharing this tutorial Jane - after participating in the Blogging Your Way course earlier this year, I have a list of changes I'd like to make to my blog and to give Homely One a makeover so this help you've given is perfect! x

  10. Thank you Jane,I have just written it all out for reference, don't know whether I'll use it straight away. I enjoyed your post on the Sydney/Hobart yacht race too..very interesting to hear about it from an insider/sailor family!

  11. I'm glad to help, ladies - it's fun to share the prettiness around! Let me know if anything's unclear. Trying to completely explain something complex only using words is such a challenge. J x

  12. Goodness gracious... something to do when I have a free hour or two... 2015?! Will get there one day... thanks Jane. G

  13. Do you ever stop being so useful, wonderful & helpful?? Love Posie

  14. wow Jane, i love it! thanks! will make one later when I don't have a baby on me and 'launch' it tmrw!

    oh I meant to say we love tony ferguson here! got a good headstart on all the twins weight on them and I'm using their bars and the biggest losers bars as of yesterday!

    happy new year

  15. Brilliant, Jane! One of those 'should get around to doing it' things I haven't done yet ... now your fab summary/how easy it actually is - with template pop-ups and no coding - is motivation enough to visit the site :)

  16. Happy New Year Jane!
    xo Cathy

  17. Why, thanks, ladies, and a Happy New Year to you all, too!

    Georgie, whilst it might look daunting, trust me - it only takes about 5 minutes to do. I'm happy to do one for you if you'd like - just let me know.

    Yes, Paula, go for it! It will only enhance your already gorgeous blogs. J x

  18. Thank you for sharing this Jane.
    I admired your signature a while ago and put one together a few weeks ago via a lot of google searches. When you posted this it inspired me to change mine to something much prettier -thank you, you really are a very generous lovely lady.
    Happy 2011 to you and your lovely family.

  19. Thanks Jane .. perfectly instructed and easy way to do the signature. I now have mine and really, really appreciate the time it must have taken you to write all that information.

    May you have a healthy, happy & successful 2011 (-:

  20. I'm going to give this a try - you'll know it was successful if you see it on my next post :) Thank you for teaching me a new bloggy-thingy! XOL

  21. thanks for this post, i now have my own signature x

  22. I'm so thrilled to see so many of you using your fancy new signatures - a brilliant way to usher in the New Year! J x

  23. ahah, I have been half-heartedly meaning to get around to doing that for ages!! will give it a go later on and see how it goes -- thanks for the tute!! x

  24. Fabulous!
    Thank you for sharing with us!

  25. Best post!! I did one a while back on that site but now i know how to put it in as a template THANK YOU!!

  26. Thanks for sharing..i've never tried it cause it looked so hard..but you made it look so easy..thanks!!! xx

  27. Great post! Have tried and it is now appearing in my new post box. xx

  28. My pleasure, ladies - good for you! J x

  29. Thanks...I have a fancy schmancy signature now.

    Lyns xx

  30. Well good for you, Lyns - I'll have to check it out! J x

  31. Thanks that looks great. I am just getting started on my own blog and its was one of the first things I actually got to work!

  32. Hi Jane,

    I have just recently discovered your blog, you write so beautifully about your life. I started a blog of my own last week, which is amusing as I am not very computer literate! Anyway thank you for this little tutorial it will make my blog look more professional.

  33. I just discovered your blog, it's just lovely.
    I've had my signature for a while and still for the lilfe of me I can't figure out how to get rid of the border around it? Any ideas?

  34. Thanks for the tutorial jane, I just stumbled across your blog whilst looking for a 'how to' for signatures and this is perfect.


    In answer to you question about the grey border, I had the same issue. I found this code online and it fixed it right up for me. Copy the code and in the template designer, click on Advanced, then click on Add CSS. Paste the code that I have put below for you and press your space bar immediately afterwards. You should be able to see in the preview of your blog below that the grey line around your images and sig are now gone. Don't forget to click on "apply to blog" to save the changes.

    Hope this helps.


    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);

  35. Why, thanks, Kylie, and for solving that dilemma! I'll forward it onto Rebekah just in case she didn't subscribe to reply comments here. J x

  36. Thankyou! I feel so hi-tech now that I have just created a signature - couldn't have done it without your tutorial!

  37. Hi Jane! This is just a treasure discovery for me! Thank you very much! I will have this for this year's Christmas pressy! : )

    Ning x : )

  38. My pleasure, ladies! So glad to share. J x


Thanks so much for sharing your thoughts, you gorgeous soul. You've just made my day! J x

Related Posts Plugin for WordPress, Blogger...