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 {
width:660px;

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZ_FXD3E5OGmtyUpL88mMOiZJYZW4LPfmML1E8uPGJrqZs01QNxJJHsI1TAqD2tQ0SjxBQfxQPZZPdjBf0SJA_iKM4e5-yykpBylLZcA2p8cIg0aiN63J6QAUoyEIQSo6cF3AJSViVa6U/s1600/WaterFront+160.jpg" /></td><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqN6snEeoI8zczJ8f-of5CsMtoE-JudvBoQ7wxZo00Q-axafbSwmO1JC0o_lIhQO8XcbvYIx0P4NuEw-KfroND4fIUOgms7cEKFlPt_KIRSTIiNQEza4H9mT0N9cqYk-qXDyRnJc4durtJ/s1600/TuaPekKongTemple+160.jpg" /></td><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1pASgyODf9lsRhnC3-EB-NowH3zCJowFIYma77Ksvqmy08eW7TM9gehwLsFm9_CE5i4fpNnUG6ngQkHfOCvrJWpWlAJfAvZ0PUIpQLXFf8PcQ7nWGcnNC3cXScR2wKhiz4mTek8T5GDZP/s1600/MeowMeowInRed+160.jpg" /></td><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhYBgPxQmzLTQw9e7fm-CO8Ji48XWQ5FfxYFecW5INhyorOgGzUfpMh_daEZyk6wPTBtPG2ug2Qv6c-O7KMc90NSt_sg8OFutS9Bqx-D5C8sfYfUFteiFSrz-qDbQqNfTuv2N_QmmMBAD/s1600/castle+closeup+165px.jpg" /></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