Hi There! Today I am going to show you how to add a custom signature to the bottom of your Blogger posts. It is really easy and is a fun way to add personality to your blog!
First you need to create your signature. You can open up photoshop, paint, gimp, or any other image manipulation program. Create you signature with whatever fonts and colors you want then save it as a .jpg.
Here is an example of a blog signature I just created for my friend, Kim. It is 320px x 70px. Which is about the biggest I would suggest you make a blog signature. It should range from 100px – 320 px wide and be about 50px -75px in height.
Here is what it looks like on the blog…
After you have created your signature then you will need to upload it to Photobucket.
Login > Upload > and select your signature .JPG.
Once it has uploaded hover over the image and a little box should pop up. Highlight and copy the Direct Link code and paste into a word document, you are going to use it in just a minute.
It will look like this…
Next login to your Blogger dashboard. Click on Template and the edit HTML.
When You click Edit HTML Blogger is going to pop up a warning box. Just click “Proceed”.
[I Promise we aren't doing anything to scary!]
Now you will need to check mark the box that says “Expand Widget Templates” in the top left hand corner.
Click your cursor anywhere in the text box and then click Ctrl F or Command F [for mac]. You should see a “Find” box on your screen. Mine is at the bottom of my screen …
Then paste the following code into your “Find Box”
<div class=’post-footer-line post-footer-line-1′>
Once you find that piece of code paste this code BELOW it, once the next line.
<img src=’IMAGE URL HERE’ style=’border: none; background: transparent;’/>
Then switch over to your word document and copy the direct image url of your signature [that you copied earlier]. Paste that into your HTML where it says IMAGE URL HERE.
Do NOT erase the quotation marks.
My final piece of code looks like this…
<img src=’http://i904.photobucket.com/albums/ac241/kelimedesign/kimsig2.jpg’ style=’border: none; background: transparent;’/>
Then you can click PREVIEW and make sure everything looks okay. If it looks good, then SAVE!
Now you have a beautiful blog signature!
Looking for more Blogger tutorials? Pop over. I’ve just rounded up more than 10 great Blogger tutorials, plus some general posts that might help you out!
Kendra @ Key Lime Digital Designs
Latest posts by Kendra @ Key Lime Digital Designs (see all)
- How to Add Horizontal Featured Posts in Blogger - April 30, 2013
- Parts of a Blog and Tutorial Roundup - March 12, 2013
- Customize Block Quotes in Blogger - February 14, 2013
This is such a great idea! I’ve always felt a little weird about just ending my posts with out saying something like “Love Kristin” or something. I think the signature makes it sound more personable.
Now…to come up with a SHORT catchy salutation…
Thanks for the tip Kendra!
Kristin recently posted..Relieve Your Mother Guilt Through Properly Cooked Chicken Nuggets
You’re welcome!
Kendra @ Key Lime Digital Designs recently posted..Beginners Guide to the Template Designer
Hi,
Great tutorial, but when I did the find search, it never came up with the code: …nothing even close to that. Any help?
Thanks!
Michelle
Thanks for the tutorial…..mine did work but it is in a white box and my background is orange. Do you know how to get rid of the white box?
This didn’t work for me, either. I ended up just adding my signature in the Post and Comments section using the Post Template option. When I tried your tutorial it kept telling me there was an error. I went through the full instructions 3 or 4 times without getting a different result. Sorry! For those that it worked for I’m sure it’s awesome.LOL I still think your site is pretty nifty though!
Our Little Charmed Life recently posted.."Let Them Eat Cake" Fridays
I get how to do this now- but i downloaded Gimp and there is not a way to save the signature as JPG…please help.