Ads 468x60px

Pages

Friday, October 26, 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:

<html>
<head>
<title>signature.jpg (image)</title>
<script type="text/javascript">
<!--
if (top.location != self.location) top.location = self.location;
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjux7CdP6B-avs-q0Ezp9tb0vxMHY6kzd4Dx6toMWVURzU5ivKV6n6LiEKf6rYWnD2zBVBpvDNrqUdOasvXJJwRvAwvIz4nV1a6VWYiw3qjILr0ayCBGTN2Gy8DqzGkepaxv0aqMslclFQp/s1600/signature.jpg" alt="[signature.jpg]" border=0>
</body>
</html>


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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjux7CdP6B-avs-q0Ezp9tb0vxMHY6kzd4Dx6toMWVURzU5ivKV6n6LiEKf6rYWnD2zBVBpvDNrqUdOasvXJJwRvAwvIz4nV1a6VWYiw3qjILr0ayCBGTN2Gy8DqzGkepaxv0aqMslclFQp/s1600/signature.jpg" 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.

0 comments:

Post a Comment