Friday, 9 October 2009

ADDING A SIGNATURE TO YOUR BLOG - TWO METHODS


Copyright-free image from Tack-o-Rama








I had an email asking for some help in adding a signature to your blog.


There are two methods:
  1. The quick and easy way, ideal if you have a new blog, or aren't worried about the signature being on ALL of your old posts. This is also the one to choose if more than one person is writing the blog.
  2. You want the signature to show on all your posts, right back to the very first one.

FIRST DESIGN YOUR SIGNATURE

Before you do anything, you need to create your signature: do this in any graphics programme by creating a transparent background, eg: 150pixels x 80pixels maximum measurement (although the size depends on your personal taste). Mine (below) is 180px x 74px.

Choose an attractive font, maybe add a little something extra (a flower for example) and merge the image if you do. Don't flatten it or the background will go white. Save as a PNG, so that the file remains transparent and your signature will "float" on any background colour.

You need to save at the highest resolution possible: PNG-24 bit if you can.








If your programme only supports PNG-8 (or doesn't even tell you what resolution it is) you need to consider this: a dark/bright text on a dark background will show a weird little whitish halo around the letters. My first try was dark red on a dark grey background and I had a nasty little dotted white outline showing.

How I solved the problem was to choose a light colour for the signature; the halo effect is no longer noticeable. Keep your dramatic text colours for a white or light-coloured background as the strobing outline won't show.

Now load your signature up to an external site, eg: PhotoBucket, Picasa, Flickr. You need the image code. If you get this: [IMG] and [/IMG] when copying the code, just delete these. It's the bit in the middle that you need.

THE QUICK & EASY WAY TO ADD A SIGNATURE

This involves very little time and effort.


Go to Settings

 
Go to Formatting

 

Scroll down to Post Template, then type in this code exactly as you see it (copy&paste is the easiest way):

<p><image class="centered"alt="post signature"
src="YOUR SIGNATURE URL HERE" /></p>

Make sure there are no gaps between " and " as you will be replacing my text with your Photobucket url (or Picasa, Flickr etc). It will start off http:// and should finish with .png.

Click Save Settings, and you'll see your signature inside the text box when you go to write your next post.


This method is especially ideal if there is more than one author for your blog (eg: if it's a group blog) as you can insert all your codes in the Post Template box, and whoever is writing the blog entry at the time can simply delete the other signatures showing in the text box. They'll all be there next time!

REMOVING BORDERS

If you have a border around your pictures, you will also have a border showing around your signature. This is how you remove it (but it will also remove the border around your pictures as well).


Go to Layout then click on Edit HTML.



Click CTRL+F on your keyboard, which will bring up a handy little Find box just above your bottom toolbar. Type .post img into this box, and the code will highlight in green, making it easy to find.


Simply change the number to 0px, and then Save Template, and you're done! 

PUTTING A SIGNATURE ON ALL YOUR POSTS (INCLUDING ALL THE OLDER ONES)

This involves a little more HTML work, but still isn't too difficult. First, create your signature as above and put it on an external site as previously mentioned.



Then go to Layouts > Edit HTML and click Expand Widget Templates.  Type in CTRL+F to bring up the Find box (just above your bottom toolbar)  and type this in:
<div class='post-footer-line post-footer-line-1'>
You'll see it highlighted in green. 

Immediately BELOW this line, type in this code:

<br/><img src='YOUR SIGNATURE URL HERE' style='border: none; background: transparent;' /><br/>

Replace my text with your own image url. Click Preview and see if you are happy with everything. Clear Edits if you aren't - and have another go. Save Template when you are finished.


post signature
your photo name

2 comments:

  1. Thank you this is so much easier - I understand it all - and where I must have went wrong last time. Just need to figure out the very first part! Thanks again sosososo much appreciated xxx

    ReplyDelete
  2. Thanks for this - I have been wanting to put one on for ages, am so glad a friend sent me a link to your blog!!

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.