Adding a Graphic Signature to Your Blogspot Blog

I just got a blogger account and have been playing around with it to give myself more options. I really like it a lot! Grant it, you don’t have nearly the flexibility or options that you have in WordPress, but for a freely hosted blog, it’s really got some sweet stuff! You can check out the blogspot I designed by clicking here.

This is the post I just posted on that site. This is the easiest way to add a signature with an image onto your blog. Of course, this would preclude that you already have a graphic with your image and signature that you want to use or have the ability to make one. (by the way, you easily make one in Paint which is pre-installed on most computers even if you don’t have any other type of editing program. Just make sure to save your image in the size that you want it to appear and as a PNG, or GIF if you don’t have a solid background on your blog, or make sure that the background color matches your article background.

There are two ways to do this, but I highly recommend the second way. Once you have an image, you’ll need to save it to the web. You can always just insert it into a blog post. Make sure to click on Large for the size, and click on either Right or Left depending upon where on the post you want the signature to appear. Now, preview your post and right click on the image. Click on “Copy Image Location.” Make sure to paste that to a notepad document right away and leave that doc. open. YOU WILL NEED THIS SOON!
The First Way

The first way is to simply add a little bit of code into your Post Template. You can find this by clicking on Settings, then Formatting on your Dashboard. At the bottom of the page, you’ll see a field that says Post Template. Simply copy and paste the following code into that box and replace (Your Signature URL) with the url you just pasted into the Notepad doc.

<img src=’YOUR SIGNATURE URL HERE’/></a>

*The Second Way (The Best Way)*

Ok, this is the best way, because if you’ve had your blog going for a long time, and you’re just now getting around to a signature, this will automatically put your signature graphic into all of your previous posts! Yay! Also, it helps your blog load faster.

1. Go to your Dashboard and click on Layout, then click on Edit HTML. Make sure to click Expand Widget Templates and first make a copy of the entire thing and save it just in case. Next, hit Ctrl+F and find the following code: <data:post.body/> or it might be <p><data:post.body/></p>
2. Directly after that code, paste this code:  <p><div align=’left’><img src=’YOUR SIGNATURE IMAGE URL HERE’/></div></p>
3. Simply replace the words (Your signature image url here) with the url you copied onto the Notepad doc. and voila, your’e signature will now magically appear on all posts of your blog as well as on every new post you make. To change the graphic, simply put in the new url of your new image. If you want to make your image a button that links to your email address, just add the following code directly before <img src…but don’t leave any spaces.
   <a href=mailto:YOUREMAILADDRESS”>

Adding a Graphic Signature to Your WordPress Blog

For WordPress, it’s not quite as simple to manually add a signature to each post, but there are a few options.

1. Manually add the signature to each post. This is the easiest thing to do, although, if you’ve had a blog for a while, you will either have to manually edit old posts, or just not worry about the signature in the older ones.
   • Simply create your graphic as a png or gif file and save it to your site.
   • In a post, add that graphic as an image to the bottom of the post (like you would add any other image)
   • In the HTML setting, just copy the code and save to use on other posts or pages that you want.
2. Add a signature to each single post (in other words, your signature will only appear on individual posts that are clicked on, but not on each post listed on the main blog page).
   • Simply copy the following code into a Notepad document and replace the img url with the url to your hosted image and replace the link url to the link you’d like your image to…well, link to.
     <a href=”THE URL YOU WANT THE IMAGE TO LINKE TO”><img src=”THE URL OF YOUR IMAGE LOCATION” alt=”" width=”102″ height=”46″ /></a>
   • Save this notepad file, and use it to copy and paste into the end of each new post (make sure you click on HTML).
     
3. Add the signature plugin from WordPress. I have not tried this out, but it’s gotten good reviews. I just didn’t want to add one more plugin and would have preferred to have found a way to manually enter code that would make the graphic appear automatically on each of my previous posts and future posts. Oh well. The nice part about copying the simple code over each time onto a post, though, is that you can choose when you add your signature more easily. The great part about the plugin is that it automatically inserts the signature into all of your posts past, present, and future.

Please leave a comment to let me know if this was helpful.

© 2009 – 2010, Sarah Roberts – Reflecting the Designer. All rights reserved.