Friday, June 22, 2007

Add a series of photos in blog footer

0 comments
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/AVvXsEjBKHNaghl2j45RTrAXhw_mBOGqci1wskLm1foKFaXrz584WyrEtATgbb1HfCzVFLDj1iy9JpN75UnbmFUtnaFR-aNxdqsDmaDDRjNv8-E3xNnweVwvdeSkoVgjl1xOuPaarODjQR2JnrKd/s1600/WaterFront+160.jpg" /></td><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiApML5jEPejuXGV9efhetLpWC7xa5qj4H4vUBrZHaLXBgbZrqj91gfwILlpxiHsipyt5vZaguyxXaKQQLjCIIiD3Md9o-HFzam8RvHw1hmSQFgXhEEPWqp6IQYhsmVuvoo-yDXJa596GJf/s1600/TuaPekKongTemple+160.jpg" /></td><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcV0ud4HThfjvvh9-BL9qAIro7VpZeMhmMTNQSK6NW43YgZFaHXTn5rVidqI7cplXZKHFwxrKS4AF-77e25vyfEnI-9kvjhyphenhyphenAglW2ZXtxRXueYYQfbEW5nph7qLx3LkERqy4rUou_vzUzT/s1600/MeowMeowInRed+160.jpg" /></td><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFC6Xq1H7hHsd1UWcWVOSy7ZAWlyYoo3iIPORG9YxgV58LBaxK_1BKiA_iNtcJXjOB7MPt27JkKqZhoC-a0caVA3B0vKo_W0Otrri6Yv7q9mmzsOUmHNKDv9eR5-0nGXlJeFjcNsQAIRm/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

Leave a Reply

Related Posts Plugin for WordPress, Blogger...