Glen Goffin Photography

Thursday, April 8, 2010

93 Blogger Tip - Adding a Flash Slideshow Header

I'm really excited about the new "Blogger in Draft" features that Google have released.  If you are a Google blogger, you really should try them.  Simply go here:  http://draft.blogger.com.   There are two really cool features that I've begun to explore - Advanced Templates and CSS.

Hopefully you may have noticed that I now have this rad slideshow header.  Previously, the editing tools didn't allow you to insert HTML or javascript references into the header banner.  The best you could do was an image and a simple line of text.  That's why most blogger sites have the same vibe.  Along with that annoying blogger strip at the very very top.  That's my next project - getting rid of that thing somehow.

Once you're in draft.blogger.com, navigate to the template designer, pick your template and then move to Layout (as above).   You'll see that you now have a banner below the header (yay!).  You'll have to leave template designer to update that widget.  At the top of this screen is a menu item:  "Back to Blogger".  Use that and then go to Customize -> Layout.  There you will be able to add script to your banner.  It should look something like this:



Now you can edit each section.  If you are a SmugMug user like me, you would add script like the following (sorry for the small type):






and VOILA!   All I have to do is add images to a particular gallery and they get fed to the banner.

Peace,
Glen

PS - I've started a new site aimed at brides and wedding planners.  Let me know what you think of it.  http://glengoffin.blogspot.com

6 comments:

sinnlighet said...

Good morning,

Just want you to know that I like your blog.... a lot!!

I'm so happy for your comment on my Wabi & Sabi blog.

A small footprint from Agneta & Sweden again ;)

Dylan said...

Thank you for this post! I'm a little confused, however, sorry if these are obvious questions but could you help me with a couple of things:

1) How do you have the photo fit to the frame in such a way that it auto crops each photo? I'm thinking that horizontal photos are the only ones you can use in the banner but I don't understand how you have it zoom in and fit to frame/banner borders.
2) How did you get your logo to always display over every photo?

I must be missing something...

Thanks in advance.

Glen Goffin said...

Dylan - you're not missing anything. You got it exactly right, at least as far as the way I do it. I pre-edited each of the banner images so that they are 404 x 968 pixels. In fact, I made a photoshop project with that canvas size. Then I put the logo as one of the lower layers and then added each new image as a layer on top. Since the canvas is the size I need, it ensures they all come out right. Then I just "save as" with each image. In SmugMug I have a "Banner Art" gallery that I use as the gallery for these images which feeds slideshow. Hope that helps - Glen

Dylan said...

Perfect! Thank you. I should have been able to figure that out. I really appreciate your help and ideas. Great photos, by the way!

places for pleasures said...

damn!!! it's not free apps isn't it?? so what happen after 15 days trial?? can i still use my slideshow for my blog?
btw how to remove "smugmug" image on the right bottom of slideshow?

Anonymous said...

Not sure if you are able to help me .... but what would I need to change in this script to use photobucket?

Thanks!