Mod My Blog Monday: Adding a Signature Image to Posts

Sorry today's post is a bit late, I didn't get a chance to get into this over the weekend and today I was working aaaalll day - with teenagers of all people! ;) It was a hectic day but it was pretty good fun, and we're doing it all over again tomorrow!

OK, so today I'll show you how to add a signature image to your posts!

I'm going to assume that you already have a signature image - let me know if you'd like me to cover how to make one next week :) I will if people are interested.

Now we need to upload it somewhere. You could use Photobucket or something like that, but since I'm on Blogger and most of you are too, we might as well make use of it!

Go and make a new post and insert your signature image so you've got something like this:

Now click "Edit HTML" and copy the image URL - highlighted here in blue :) Paste it into Notepad or some other text editor for now. 

Easy CSS Method

Use this if you don't use LinkWithin!

If you use LinkWithin, using this method will result in your signature being below the LinkWithin widget :)

Now click on the "Design" tab, then click "Template Designer" - highlighted in red below:

Now I have some code for you! 

.post-footer{ background-image: url('YOUR_URL_HERE'); padding-top: 60px; margin-top: 20px; background-repeat: no-repeat; background-position: center top; }

Click "Advanced" then scroll down to "Add CSS" and paste the code above into the text box! Make the changes I describe below, then click "Apply to Blog" to apply it to your blog ;)

In the code above, replace YOUR_URL_HERE with the image URL you copied earlier. Hopefully you have it saved in Notepad or something ;) Leave the single quotes as they are.

Change the 60 after padding-top to the height of your image. This makes sure there is enough space above the usual post footer stuff to show your image without it overlapping anything. You can work this out by trial and error if you want :)

You can leave 20 the after margin-top if you want or adjust it, at the moment it's set to 20 pixels. This is the padding between the image and the end of your post, the picture below helps to explain the spacing:

Still-Easy HTML Method

Use this if you do use LinkWithin!

Before you do this, back up your template! This method is easy, but you need to back up first! That's why the CSS method is preferable if you can - it's harder to accidentally mess up your template code :) BUT this method will work even with the LinkWithin widget or any other widges you might have.

Click on your "Design" tab, "Edit HTML" then check the "Expand Widget Template" box.

Search (use Control + F) for the code <data:post.body/> highlighted in green below:

Underneath that code, paste this in (I highlighted my code in blue above):

<BR/> <CENTER> <IMG SRC='YOUR_URL_HERE'/> </CENTER>

In this code, replace YOUR_URL_HERE with the image URL you copied earlier. You should have this stashed in Notepad or something ;) Leave the single quotes.

Now my posts have a nice signature below them each and every time! Easy peasy!