Welcome!

New Here? Welcome!
Be sure to subscribe to get the latest tips by email.
Scroll down to the topics or use our custom search.
Drop us a comment, and we'll source an answer for you.

How to Create Multiple Pictures Under Your Blogger Banner

Update: Scorpy. Roy has disappeared from Google, so I removed the link to his profile.  I believe I may have another solution to this problem and will blog it soon. 
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.
  1. Open 'edit html' inside 'design',  back-up your template first, and then do the following:
  2. in the style section paste this
# image-wrap{
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.

11 comments:

Marcia Fremont said...

i followed your instructions but the gadgets are stacked vertically, not horizontal and i wanted them. I already could do vertical gadgets in my header by draggin the widget to that position. Is there anything i can type into the html code to place these (5 in my case) gadgets SIDE BY SIDE?
THANKS!!

Suzanne said...

Hi Marcia! Thanks for your question, I contacted Scorpy Roy on Facebook to see if he might be able to help with this.
There seem to be a few steps missing from the process, for example, ticking to open the widgets needs to be in there, and an explanation of what is meant by the style section.

You have several different interesting blogs, which blog are you putting the pictures on? I'm going to try the first technique by building a collage using picnik and mapping it so it is "click able".

If you get the code working, I'd appreciate you sharing it with us! Thanks for stopping by!

Marcia Fremont said...

Suzanne..thanks so much! i want it for the In Seasons Israel blog that i am just building. The 5 gadgets appeared nicely at the bottom of my header, but, like i said, they are stacked vertically (and i can't move them anywhere else)

I can't figure out the picnik but my collage on picasa is just that..a collage but not a side by side display.. yes , i will share anything that proves successful and hope you do too. Especially if you can do a side by side collage that would help. (btw..i haven't done the Today in Israel blog for a couple of years, i prob should take it down.:) )

Suzanne said...

I'll keep fiddling with it today. I need to get the pics of my newspaper contributors posted on Omemee Pigeon eFlyer

Marcia Fremont said...

hi..well i managed to get 5 small images across using none of the codes above. i stayed with the regular gadget that i dragged to the header position (it looks like it is UNDER THE HEADER in the layout but actually is inside the header)..i chose html/java script gadget, added each pic with is html code(in my case from picasa web), downsized the size of the picture to a workable image by changing the dimensions in the codes. It positions them vertically, but switching from "edit html" in the gadget itself to "rich text", then dragging and dropping the pictures side by side did the trick. I did enough images to fill the gadget box horizontally. And in the header it fills about halfway across the width of the header. If i add one more it will probably drop to a 2nd line but actually i have enough now, so don't know if i will even test it.
Thanks suzanne..hope this gives you some ideas. I never could figure out making a banner tho that sounds like a good solution too.
all the best.

Caitlin said...

where is the style section and i can't fined ('<b:section class='tabs' id='crosscol' maxwidgets='1' showa...')????

Unknown said...

Hi Marcia Thanks for your help. I'll post an article on how to create a banner using Picnik. I sent another message to the author of this piece.

Hi Caitlin! Neither Marcia, nor I could get this to put 4 pictures side by side.

My understanding of his use of the word 'style' would be the 'Variable definitions' section.

Re: finding the 'tabs'
this line only shows up if you have tabs for pages created in your blog and defined. What is your blog url?

Gowardhan said...

Thank you

that was helpful

scorpy.roy said...

Thanks for sharing my tips here, you can get occasional updates about various blogger blog related tips and tricks at www.scorpydesign.com. I was designing a blog for a friend www.goddydesigns.com - just check there and you could found there are three images on header - just guess how i managed to insert them there.

ahmed said...

after applying all these procedure you can see the free download mobile apps blog 

ahmed said...

thankyou

this is very useful for us

Get Blogged Tips by eMail

Enter your email address:

Delivered by FeedBurner

Blogged Tips Search

Related Posts Plugin for WordPress, Blogger...