Monday, April 11, 2011

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! 

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):

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!


Anonymous said...

Thanks this is awesome - I was wondering how you did that (I was going to just add a picture at the end of every post but this is much easier!)

Jennifer said...

I've been wanting to do this! Thanks for the know how now!!

Jennifer said...

Ok I did it! Easy except I wanted my signature above the Link Within! How do I do that dearie?

Rissa @ Hazel and Honeysuckle said...

Boo for LinkWithin putting itself in the post-body instead of post-footer! I've updated the post to show you an alternative method :)

Jennifer said...

Thanks girlie!! Tryin it out now!

Jennifer said...

Ah! Wonderful!! Yay for you and me!! Thanks!

Robin@thesweetestpear said...

I am so excited to give this a shot, and have this saved to try when I get another free minute of blogging. Your tips are super helpful. Thanks for sharing!

Post a Comment

I love getting comments, they make my day! Please let me know what you think or any ideas you have for me, I would love to hear them!

Before you comment - are you a 'no-reply' blogger? If you are, I can't email a reply to your comment! I really would love to be able to! If you want to change this, go to your dashboard, click "Edit Profile", tick "show my email address" and save!

I'd really love to be able to email you back! xx

Related Posts Plugin for WordPress, Blogger...