Tuesday, February 8, 2011

How To Tuesday: Signature after your blog post!

I'm sure that a lot of you have visited blogs where people post and at the end of each blog post is their signature. Or something that looks like a signature. I know when I first saw it on a blog I thought, "Hey, I want that! That looks cool!" It makes the blog seem more personalized... almost like you're reading a real letter from a person. Which is funny... because adding a signature to your post is a completely automated process :) One which I'm sure Blogger will simplify and have a gadget/option for in no time at all.

But until then, what's a blogger to do?
...Fake it.

1. Before you can add a signature to your blog post, you'll need... a signature! An image (.gif, .jpg, .png, etc.) hosted somewhere online. You may even be able to use the Picasa album that Blogger sets up for you- but I'm not too familiar with how that works. Anyway, create your image, then upload it and save it somewhere online.

2. After you upload your image, right click it and copy down the address (or open it in a new window so the address is visible in the address bar.)

3. Go to your Blogger dashboard page and click on "Design" at the top. Then click "Edit HTML."

4. If you want to be safe, click on the "Download Full Template" link at the top of the page and save it in case you screw up. If you want to live on the edge, skip this step!!

5. Check the box that says "Expand Widget Templates."

6. Click your mouse in the HTML code window.
(Note: Apparently the blog code is done in XML, which kicked my butt a little when I was trying to do this, since I was using HTML....)

6a. At the top of your web browser's main menu, click Edit, then click Find
(in most browsers you can hit CTRL + F or Command + F on a [much cooler] Mac!).

6b. Then enter this in the Find:  
<div class='post-footer'>
(you can copy and paste from here to be sure to get it right.)

7. If you found that code in the HTML code window, insert the following code above it, on the line before it: 
<br><img src='http://www.YourImageAddressOnTheWeb'/></br>

Be sure to include the file extension of your image at the end of the address! 

You're basically going to add <br><img src=''/></br> and then insert your complete  image address location between those two single quotes :)

* * * * * * GEEKERY ZONE * * * * * * * * * * GEEKERY ZONE * * * * * * *

The <br> and </br> put your signature image under your blog post, on a separate line (instead of next to the text).
The <img src=''/> tells the internets where to find the image you want to display.

* * * * * * * * RESUME NORMAL NON-GEEKY ACTIVITIES * * * * * * * * *

8. Click Save Template. If you don't get any mean bright red error messages, congratulations! You did it right!
Now view your blog.
If you want more space around your image, you can try
<br><br><img src='http://www.YourImageAddressOnTheWeb'/></br></br>
instead. The extra <br> at the beginning and </br> at the end will give your image another separate line before it.

That's it!
If it doesn't work, and you keep playing around with it and it still won't work, you can either click "Clear Edits" or upload the file you saved of your original HTML... if you saved it!

*PLEASE* Let me know if this works for you, or if it doesn't, or if you have questions. Different blog templates work slightly differently and I used the coding that worked for my template... but I can't test them all.
If you comment here I'll try to come back and respond! I hope this works for at least someone out there who finds it and is helpful to you! :)


Doris Sturm said...

Thank you, Samantha! That was great information!

Samantha G said...

Thanks for commenting, Doris! I hope if you try this you can get it to work :)