BlogsByHeatherSignatureDo you have a new blog signature that you would like added to every blog post (new or existing)?  Then this article is for you!  It does involve some HTML and storing an image…but let's give it a try! If not, shoot me over and email and let me know where you get stuck!

Storing Your Post Signature Image 

  1. First, you have to have an image of your signature (for this tutorial), such as mine (displayed above).
  2. Next, you have to "store" it some place. Maybe you already have a Photobucket account or Flickr or other online place where you store images? You can upload it there and get the Direct URL. If so, skip to the "Going back to Blogger area, step 14 below). No? If not, no problem. We'll use Google Sites! It's free and you don't have to "open" and remember a password for yet another site!
    1. Login into Blogger, your blog (http://www.blogger.com).
    2. Then go to http://sites.google.com.
    3. You may be prompted to login again.
    4. Next, you want to create a site by clicking the red CREATE button. Note, it will look like you are setting up a free web page but we are using Google Sites for image storage. Let's keep going along….
    5. Complete the information shown in the Create New Site screen.

      CreateGoogleSite

    6. It doesn't matter what template you choose as we are just going to be using Google Sites for image storage.
    7. Complete the info and then click red CREATE SITE button.
    8. Next, you'll come to a screen like this (shown below).

      NewGoogleSite

    9. You will do nothing here but go up to the upper right corner, click on More and then Manage Site.
      ManageSite
    10. Then from the left sidebar, click Attachments.
    11. Click the Upload button at the top and then select the image from your computer to be store in Google Sites.

      SaveAttachment

    12. Then notice to the right of your newly upload post signature, that you see View/Download.
    13. Right-click on View and choose Copy Link or Copy Link Location or Copy Shortcut (whatever your browser says – LOL).

      Now you are ready to go to Blogger and insert that link and code into HTML code! 

    14. Go to Blogger again http://www.Blogger.com, and to your blog.
    15. Then go to Design, then Edit HTML or if using the New Blogger Interface, go to Template, Edit HTML, and click Proceed.
    16. When at the "code", click on Expand Widget Templates check box at the top of the box with all the code in it!
    17. Then do CTRL+F (find) to find the post-footer-line-1 and then paste this code above it (click image to enlarge the image):

      <img src=' paste in the copied link here '/>

      NOTE: Use signal quotes. You must have the / at the end before closing the bracket.

    18. EditHTMLThen remove this part: ?attredirects=0 
      ReEditHTML
    19. And if you want to add "no border" around the image also add the following code style='border:none;' shown here:

      EditNoBorder
      Remember to click images to enlarge the view to better see the code.

    20. Click Preview before you save…

      Preview

    21. If it looks good, click Save Template button and you're done! 

 

You're done! Congratulations on using Google Sites and using HTML code in your Blogger blog πŸ˜€

Happy blogging!

Heather πŸ˜€

Past articles about how to add a post signature:

  • To all new posts (leaving the other ones alone as they may  have an old signature design already).
  • Manually adding one when you want to (and not have it appear on every existing or new post). Using the HTML method and Copy Link (instead of the Properties option) prevents new images begin loaded to your Picasa Web Album (which is where Blogger stores all images being inserted to your blog posts and sidebars).