Saturday, June 23, 2007

Add a series of photos in blog footer

A blog reader asked how to put the profile photos of each author in a blog footer. That require a long answer, so I will answer in a post. Actually, the method described can be applied to the Header as well as the footer. You just click the right Add a Page Element in the right section in the LAYOUT.

I will proceed to explain how I put a series of 4 photos in the footer of My photo store. The first thing I did was to find out what is the width of the footer, and to do that, I click the TEMPLATE tab, then the EDIT HTML sub-tab to open the template editor window. I search and found this:

#footer {

That tells me the width of the footer is 660 pixels wide. I plan to put a series of 4 photos in the footer. 660 divided by 4 gives me 165. There are 2 ways to proceed, I will use the method that conserve storage space for my Blogger account and describe a slightly different method later. I will first resize the photos to width 160 using Irfanview (click BACK button to get back to this page). I then uploaded the photos to Photos for footer. I clicked on the photo one by one to get to the webpage that shows only the photo, and for each photo, I click VIEW in the menu bar and chose "View source". I copied the URL of the photo from the source and paste it into a Notepad file for later use. After getting the URLs of all the 4 photos, I then proceeded to the next step.

I clicked the TEMPLATE tab to get to the LAYOUT, click "Add a Page Element" in the footer section (if you want it in the Header, you will click "Add a Page Element" in the Header section), chose HTML/Javascript, then type this HTML for a table:

<table><tr>td><img src="first photo URL" /></td><td><img src="second photo URL" /></td><td><img src="third photo URL" /></td><td><img src="fourth photo URL" /></td></tr></table>

The actual HTML I used to display the series of 4 photos in the footer in My photo store I give in the scroll box below:

<table><tr><td><img src="" /></td><td><img src="" /></td><td><img src="" /></td><td><img src="" /></td></tr></table>

You will have to adjust the method described according to the number of photos you plan to put in the footer.

As promised, I will now described briefly an alternative method with will take up more Blogger storage space. You can upload the photos in its actual size, them for the <img> tag, write the tag as follows:

<img src="photo URL" width="160" />. Of course, if your footer width and/or the number of photos you want to put is different from mine, you will have to adjust the width="W" according.

All about digital photography


  1. hi, i've followed these steps to create a footer for my blog. it works fine except for the space that appears between the content and the footer image. any ideas on how to remedy this? :) thanks!

  2. Hi Mayumi,

    I tested this before I published it and didn't have the problem you mentioned, so I can't tell what is wrong. Perhaps you can get into the post editor window and publish the post plus HTML somewhere, maybe in a backdated post in your blog or create a new blog for that. Probably better to put it in a scroll box. See Make scroll box. Also, for displaying HTML, refer to Ways to display HTML in comments and posts.

    Peter (Blog*Star)
    Testing Blogger Beta (now New Blogger)

  3. Hi, thank you for replying. Did you have time to check out the blog? I don't know why there's a space there. Or maybe I shouldn't have used the steps to make a footer.

    In any case, if you know how to make a footer that rests directly under the middle column of a 3-column blog, I'd really appreciate the help.


  4. Hi Peter

    I read your post on adding a copyright on my footer. I really thank you for your help. I am not that great with HTML and since my blog template did not have a default footer option, I had to add the code as you suggested in my template.

    Now I would like to add an image too if possible. This is the current status of my footer (I have edited the <> so that I can post here):

    (!-- Begin #footer --)
    (div id='footer')(hr/)
    (center)(p)copyright©13th Random.All Rights Reserved.(/p)(/center)

    (!-- End #footer --)

    How can I add an image here? Can you help?

  5. Hi 13thrandom,

    This is an old post published before Blogger changed to the New Blogger xml template. Are you using the old classic Blogger template or New Blogger xml template?

  6. Hello!
    What a helpful tutorial and easy to understand!
    thank you for that.
    Keep it up! :)


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics