Saturday, October 27, 2007

Sign post with image signature

Here are the instruction on how to sign your post with an image signature. You can see a demonstration at Papaya: Healthy and cost effective fruit. The signature is in text form, but it can be "hand written" as well. Instruction for this will follow later.

I first used the free and very good Irfanview photo editor (click BACK button to return to this page) to create a blank image. Once Irfanview is opened, I click IMAGE > CREATE NEW (EMPTY) IMAGE in the menu bar at the top, set the width and the height of the image, choose the background color, then click OK. In the newly created image, I drag and drop the mouse to make a selection where I want my signature to be displayed, click EDIT > INSERT TEXT INTO SELECTION, type my signature, tick "transparent if I want the text to be transparent or select the background color for the text otherwise. Select the font family and font size, select text alignment (left, center, right), then click OK. If you find it unsatisfactory, it is very easy to change. All you need to do is to repeat the steps above, all the original settings and text will still be there, change what you need and click OK again. Once satisfied, save the signature image into your computer.

You will next have to upload the image signature to the web. There are many ways to do that. What I did is to create a new post in a blog specially for this purpose, and you can see the image signature uploaded at Signature image for blog post. I clicked on the signature image which gets me taken to a web page containing only the image. I then click VIEW > PAGE SOURCE which will cause a new window to open, displaying the source code for that page. I past below in the scroll box the source code I obtained:

<title>signature.jpg (image)</title>
<script type="text/javascript">
if (top.location != self.location) top.location = self.location;
// -->
<body bgcolor="#ffffff" text="#000000">
<img src="" alt="[signature.jpg]" border=0>

The photo URL is highlighted in red. I click and drag the mouse over the URL, right-click and chose "copy" (or ctrl+C) to copy into the clipboard. My habit is to open a Notepad file and paste it there so I can always get it when I want.

I then type the HTML for an image at the bottom of the post. The HTML will be of the form

<img src="photo URL" alt="some descriptive text" />

The photo URL will of course be replace by the actual photo URL highlighted in the scroll box above. Preview, and if satisfied, publish.

I put the actual HTML to display the image signature in the scroll box below:

<img src="" alt="image signature" />

Once you have created this HTML, you can have the HTML in every new post you create by clicking the SETTINGS > FORMATTING tabs, paste the HTML into the post template at the bottom and save the settings. You then don't need to retype the HTML each time you create a new post.

If you want a hand written signature, you will have to use Paint that comes with Windows under Accessories. I will add instruction later or more likely make a new post and put the link to that post here.


  1. i was wondering why!!

    Hey can u tell me how to add codes to a blog in blogger? Everytime i do that it collates with html code and everything is messed up
    Sunil Kumar

  2. Hi Sunil,

    Why what? Why did I published this post? Because One blogger asked how it can be done. Apparently, there is another way, but you need to tamper with the template, which I like less, but which I will try to test later when I get some spare time.

    Regarding adding codes and collating with HTML code, messing up, etc., I am afraid I don't understand your question.

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

  3. i m so sorry but this text
    "i was wondering why!!
    thanks" was added by mistake..

    i was asking how did you add the source code here
    because everytime i use square brackets <> in my post. it just messes up with the source code of my post.

    I just wanted how did you add the source code in your post


  4. Hi Sunil,

    Please refer to

    How to display HTML tags in posts and comments

    Displaying HTML tags.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

  5. hey i was offline.. so didnt aprrove that..
    it wasnt a spam!!

  6. Hi Sunil,

    OK understood. No offence intended and hope no offence taken.

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

  7. nothing offensive Peter.. i just liked your promptness. I would love to add you in my contact list. Please send me your email address, if you wish to?

    Would you please review my blog at :

    Mostly about puzzles and occasional things that i feel great to know!!

  8. Hello Peter,

    I thought you may be interested to know about My Live Signature which is a free service you can use to generate a signature-style image you could use in a similar way. It's much easier than creating a signature in an image program, and can be used for the same effect.

    Hope this is useful to you,

    Best wishes,
    (Blogger Buster)

  9. Hi Amanda,

    Thanks for the lead. I tested it, but the downloaded signature didn't appear as what was shown when generating signature, so now going to try to put the signature here to see how it is going to turn out. Forgot. Comment don't accept <img&gr; tag, so have to test it on a post.

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

  10. Hi Amanda,

    I have made a test at Signing posts with a nice graphic almost handwritten signature.

    Instructions plus link to your site is at Nice almost handwritten like graphic signature for you posts.

    Thanks for the tip.

    Peter Blog*Star
    Dummies Guide to Google Blogger
    "online book" in progress. Use the content at the top of the main column

  11. Hi can you plz say how to add the google search in my blogspot i got the adsense search code and content code and if i paste that in the source code of the blogspot then i cant do that , it will not be saved

    my blogspot is

    can you plz help me and can u also say me how to put the verify meta tag to it to advertise in the google
    i got the verify meta tag code but unable to do on my blogspot

    plz give me step by step instructions

    help help me looking forward for ur reply

  12. Hi Amrutha,

    You have to tell use what kind of template you use, classic template or New Blogger template? To distinquish, refer to How to find if a blog is using old classic Blogger template or New Blogger template.

    You only paste the script into the template IF yours is a classic template. See

    Add content via old classic Blogger template.

    If New Blogger template, refer to

    Add Google search box at top of main column for New Blogger template/

    For the rest, I will have to wait for your response.

    And you have to describe your problem with more details, like which part of the template are you trying to add, what was the error message, if any, etc.

    Peter Blog*Star
    Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks" slotted for conversion to custom domain

  13. Hi Peter,

    Thanks a lot for ur tips and guides...

    But is there any way i can do to remove the border for the image signature in the post?

  14. Hi there, Firstly, I'd like to say thanks for this site. It's been really helpful with getting my blog signature created and it was showing on my posts perfectly since I followed your instructions. Today, however it is just showing as [signature.jpg]and I'm not sure what has gone wrong. I moved the image to my blog picture album in Picasa Web Albums and have tried changing the image coce in the template with no luck. You can view my blog
    Your help would be much appreciated,
    Thanks Fi

  15. If you moved the image, then you will have a new photo URL and you will have to get its direct URL.

  16. Thanks Peter, I thought I had done that already though. I went to the image in the folder I had moved it to and got the image info. I then replaced the url with the url I had just copied but it still didn't work. I'm pretty new to this blogging caper so I feel like a bit of a dummy but proud of what I've achieved so far.
    I'll have another try and see what I come up with,

  17. peter

    i don't understand what i need to do. i need a signature, twitter name, fb fan page, skype name, linked in name - any chance you might be able to do these for me

    robyn - written kieseker and ivars milnis - healthy home products distributors
    skype - robyn.kieseker
    linked in kieseker.



  18. Anonymous8/10/2010

    awesome. thank you.


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics