October 31, 2011

How to Add Your Signature to Your Blog Posts

Have you been wondering how to create and add a signature to the end of your blog posts like this one:






Let me show you how:

Updated 9/15/2012

First we will start with creating your signature. You will need to some type of design software, Pixlr (free), Corel or Photoshop Elements, or whatever software you can get your hands on. I use Photoshop CS4 but the steps are very similar no matter what program you use.

1. Open a New File.

 A good size is about 200 pixels by 75 pixels with a resolution of 72 pixels per inch. You can adjust it to be larger or smaller if you like. The background must be transparent because we do not want a white rectangle to show up on our blog behind the signature. (Unless your blog has a white background for the post section. If that's the case then it doesn't matter.)

2. With the Type tool, choose a font and then type your name. You can add any effects to your name and add any embellishments you like. Here's mine:


3. Now, save your file twice, first as a Photoshop file, or Pixlr file or whatever program you are using. (Saving it in this format allows you to make changes later if you change your mind about the design.) Then, save your file as a png file. You will find this option under "Format" in the window that pops up for you to save the file. If you do not see png as an option, then hit Cancel and go to your File menu. Look for something like "Save for Web and Devices". Choose png from the list of Formats. (It may not say Format, but it may just show one of the formats such as "gif".)

4. Once your file is saved as a png, you need to upload this image to the web.To place your image on the web, you need to find an image hosting site. Photobucket is a great image hosting site that is free and gives you plenty of storage. Set-up your account by following the instructions on their site. Once you are logged in, click the green "Upload now" button.

Click the green button "Select photos and videos" and Browse to find your png file. When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click "Choose action" and select "Generate link codes for selected".

A window will pop-up. Click in the box that says "Direct link". This will copy the link code so that you can paste it in the next step.

 (If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until a list of options appears below the image. Click the code next to "Direct Link". Clicking this automatically copies the link for you.)

5. Now it is time to go back to your blog. This is where you have two options as to how to add it.

First: You can add your signature to all of your new posts, but not to your old posts. (Very Easy to add. You don't have to go to "Edit HTML" at all.)

Second: You can add your signature to all of your posts. (A little more complicated. Also, if you use the widget "LinkWithin", the signature appears after this widget. Not a big deal, but it looks a little weird.)


First Method: Go to your Blogger Dashboard and choose "Settings". Then click "Formatting". Scroll to the bottom where it says "Post Template".

Update: In the new Blogger Interface, go to your Dashboard and click "Settings" and then "Posts and Comments". Where it says "Post Template", type the following:

<br /><img align='right' src='Direct Link'>


If you would like your signature to line up on the left, change the part that says "right" to say "left". Then insert your "Direct Link" that you copied from Photobucket in the place of the words "Direct Link". Make sure that you keep the quotes around the words "right" (or "left" if you changed it) and your direct link as you see it here.

Click "Save Settings" at the bottom and try it out. All of your NEW posts will have your signature at the bottom! (You will not be able to see the signature until you make a new post.)

Second Method: I found this method on another blog, by Kevin and Amanda. If you have any questions about how to do it, let me know. I've used this tutorial tons of times.


Let me know how it goes! I'd love to see your blogs!

*Signature embellishment is by Katie Castillo at Just So Scrappy from her kit Happy Day

10 comments:

  1. Dani,
    My signature isn't transparent even though I saved it as a png. Any ideas or suggestions?

    ReplyDelete
  2. Erika,
    Was the background of the picture white? If the background has any color at all, it will still be included in a png file.

    ReplyDelete
  3. Hi Dani,

    I'm working on adding the signature but blogger has switched their look since you posted this tutorial. I was able to follow your concise and easy instructions on creating the signature. I'm just having a problem adding it.

    Do you have a more updated version of adding a signature.

    All the best,
    Christine

    ReplyDelete
    Replies
    1. Christine,
      I updated my tutorial to match the new Blogger Interface. Let me know if these instructions work for you.

      Delete
  4. Hi there,

    Where did you get the embellishment from?

    Thank you.

    ReplyDelete
    Replies
    1. Sorry I didn't give credit! It is from Katie Castillo at Just So Scrappy from her kit "Happy Day"

      Delete
  5. Thank you so much!! This was super helpful even for a beginner like me!!
    shethenwriteshome.blogspot.com

    ReplyDelete
  6. Awesome tutorial! I have been looking to spruce up my recently started blog! Check it out: beatofthemusic1@blogspot.com Thanks!

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.