This little tutorial was requested by a reader and I am sure it can help out a few of you. I’m going to show you how to add a signature to all of your new and existing Blogger posts.
The best part about this method is that you can change out your signature at any time and the changes will reflect on every post. You don’t have to worry about including it at the bottom of every post you create and it only takes a few minutes.
Follow along below:
1. Create your signature image
First you’ll need to create your signature image using a photo editing program like Photoshop, or the online Pixlr editor. Get creative. Maybe you just want text, or maybe text with an image… Or even a scan of your actual signature!
I created mine on a transparent background so it easily blends in with my blog background colour. If you do the same, save it as a PNG. Otherwise a JPG will work.
Tip: There is a difference between PNG and JPEG. Which one you upload directly impacts the file size and the strain on your server.
2. Upload your image to Photobucket
Next you’ll need to store that image somewhere. Upload it to a site like Photobucket using HTML code.
3. Add the code to Blogger
Visit the Template > Edit HTML page in Blogger. If you click inside the text editor and press CTRL + F (or CMD + F on a Mac) it will open a search box in the top right corner of the editor.
In this box, enter: <div class=’post-footer’> and press enter. It will find one instance of it, but you will want to find the second instance, so hit enter again to jump to the second instance.
Now copy your image code. You can get the image code from Photobucket if you click on the image you uploaded. Copy the HTML share link from the text box in Photobucket and paste it directly above <div class=’post-footer’>.
Your finished code should look like this:
<img src="http://YOUR-PHOTOBUCKET-IMAGE-URL.png" border="0" alt="your photo name"/> <div class='post-footer'>
If you want to add a bit of space above the signature, just add a couple of line breaks above the image code, like so:
<br/><br/> <img src="http://YOUR-PHOTOBUCKET-IMAGE-URL.png" border="0" alt="your photo name"/> <div class='post-footer'>
Preview your layout to make sure everything appeared as it should and save your template!
There you have it, an easily customizable post signature. Signatures add a little bit of personalization to your posts and can be designed to match your blog layout.
I hope this tutorial helps and as always, if you have any requests for topic suggestions, feel free to send me a quick note using the contact page.