Thursday, January 31, 2013

Tutorial on Adding a Signature to your Blog Post

blog signature
These are the steps that I use to add the signature to my Blogger hosted blog.  

First you will need to design the signature that you want and then save it to an online photo storage site.  I use photobucket.com to store my blog materials.  If you need to find some cool fonts, step four on the blog post Tips to Design a Blog Header has a few helpful hints.  Make sure that you save your signature as a .png file.

Next go into the template section of blogger.  Before you make any changes, be sure to backup your blog.  The backup can be found in the template section (on blogger) at the upper right.  Download the template to your computer and then proceed.

At the top of the template section, you will see "edit html".  Press that then put a check mark into the "Expand Widget Templates" box.  Now press Ctrl +F  and search for post-footer-line-1. There may be more than one of these in the search, but stop at the first one that you find. 

Right after that line, copy and paste the following:

<img src='Your signature image link' style='border: none; background: transparent;'/><br/>

Delete the words "Your signature image link" from above and replace with the link to your signature image.  Make sure you keep the apostrophe at the beginning and the end of your image link.

So your HTML should look similar to what is below:

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
<img src='http://i1100.photobucket.com/albums/....png' style='border: none; background: transparent;'/><br/>


Press save and you will be done!  Don't forget to backup the template again if you are happy with the changes.

The other tips I will write about are backgrounds, image mapping, and resources on the web to find great layouts for your blog.  If you want to know how I added other elements to my blog, please ask.
Related Posts Plugin for WordPress, Blogger...