How to make a siggy

It comes up often enough, I thought it was high time I made something I could link people to, so I don’t have to repeat myself. 😉

If you use the message boards on The Knot, The Nest, or The Bump, this is how to make a signature, or siggy for short. Most of the directions will be useful for any message board that has HTML signatures, but I’ll be specifically talking about and taking screenshots of The Nest when it’s site-specific. And my other screenshots will be on a Mac computer using a Chrome browser, but it will work fine on any computer, so ignore any subtle differences. K? K.

  1. Find a picture. You need a digital picture (ending in .jpg or .jpeg or .gif or .png) somewhere on your computer. It can be scanned in or fresh off your digital camera, or it can be something you edited beyond recognition. It doesn’t matter. It just needs to end in one of those extensions and you need to know where it is on your computer.
    Screen shot 2011-03-02 at 12.42.28.png
    Personally, I like to mess with my pics. I’ll teach you that later in another lesson maybe. 😉 Anyway, here is my pic in Finder (Explorer, in Windows-ese).
  2. Get it online. There are several sites out there that will let you do this, but let’s use tinypic. Go there, and fill in the form like so:
    Screen shot 2011-03-02 at 12.45.07.png
    You want to make sure you set the “resize” option so you don’t get a crazy big siggy. Hit “Upload now!” and prove you’re a human.
  3. Copy the HTML. Click on that very first box under “HTML for Websites” and copy it.
    Screen shot 2011-03-02 at 12.49.04.png
  4. Paste it into your siggy. Go to your profile.
    Screen shot 2011-03-02 at 12.50.27.png
    Sometimes it makes you log in again for some reason.
    Screen shot 2011-03-02 at 12.50.56.png
    Click to edit your avatar & sig.
    Screen shot 2011-03-02 at 12.51.16.png
    Go down a bit to your forum signature and paste it in.
    Screen shot 2011-03-02 at 12.52.40.png
    Then hit save below that box and you’re done! Enjoy!
  5. Extra stuff! This is optional stuff you can add to your siggy now that you have a picture in there.

    • Want some text too? No problem! If you want it above your picture, start typing it before that code you just pasted in. If you want it below your picture, start typing it below that code. There’s a catch, though! You’ll want to put a line break between the picture and your text. The way to do that in HTML is by typing <br />. Observe:
      Screen shot 2011-03-02 at 14.59.50.png
    • How about a link? Tinypic puts a link around your picture for you, so you can kinda copy what they did to make your own. See that “<a href=” stuff? That’s the link. Here’s an example where I make the text above my pic link to my blog. You need <a href=” WEB ADDY!! “> before what you want the link to be, and </a> after.
      Screen shot 2011-03-02 at 15.04.28.png