While looking for a solution for another problem, I came across this great tip on how to create a row of picture links under a blogger banner, from
Scorpy Roy a graphic designer offers three solutions, each with a varying level of difficulty. Difficulty, just as beauty, is in the eye of the beholder. Being more conversant with code than creating images, for me the easiest solution is using the CSS code solution offered by Scorpy Roy. Which solution is easiest for you? Be sure to leave a link to show how you used this tip.
Here are Scorpy Roy’s suggestions for putting multiple images under a Blogger Banner:
Inserting multiple images under a Blogger Banner : Easy Way
1. prepare a composition of your images in any image editing software, make the width same as that of your blogs header.
2. add an image widget inside the crosscol section and upload / link your image
Inserting multiple images under a Blogger Banner : Intermediate
Switch to any template that uses a split header layout, you will usually find 2 header templates.
Inserting multiple images under a Blogger Banner : Difficult
(You need to know html / css, and have some blogger template knowledge )
These instructions will give 4 spots under the Blogger Banner to change the number of photo spots, see the note below.
- Open 'edit html' inside 'design', back-up your template first, and then do the following:
- in the style section paste this
width: 100%;
}
.image-holder{
width: 25%;
float: left;
}
3. Inside body, just before '<b:section class='tabs' id='crosscol' maxwidgets='1' showa...'
add the following
<div id='image-wrap'>
<b:section id='image-1' class='image-holder' />
<b:section id='image-2' class='image-holder' />
<b:section id='image-3' class='image-holder' />
<b:section id='image-4' class='image-holder' />
<div style='clear: both'/>
</div>
4. Now save your template and go to 'page elements', you will have 4 widget-holders under header and you can add images there through 'image' widget
Note : I set the width of the image-holder class to 25% and added four <b:section class='image-holder' ... > sections to hold 4 widgets inside the image-wrap. if you want 3 make the width of image-holder class to 33% and delete the <b:section id='image-4' class='image-holder' />section.
I’m off to try these ideas and see how they work for me! I plan on using this to add pictures of guest authors to my blogs.