Tuesday, July 24, 2007

Rotating image banners for blogger


This post is deprecated. More details...
Some of you were curious to find out how to create a rotating banner in blogger, here's how I managed to do it:

1) Enabling image header display on blogger first.
Theoratically, this is not necessary if you knew your way around blogger's template language, but since I embed my code inside the useImage conditional block, it has to be enabled before header images will be shown. Select the Template->Page Elements tab and click 'edit' on the (Header) element, which the following window appears:



Select the image that you want, from an external URL. You won't be using the 'From your computer' option, because there's no way you can know how the url of the image is managed in order to use it. The actual picture doesn't matter, but it is usually the one you want to be showing when javascript is not enabled. Click on 'Save changes' once you are done selecting the image.

Blogger is stingy in the sense that it only allows one image to be uploaded at a time, so you'll need to use an external hosting site to host your other pictures in order for rotation. You can use any image hosting site, and I use flickr for this task.

2) Modifying the blogger template.
The template needs to be modified to use javascript to perform the random image rotation. Select the Edit HTML tab, and find the following lines in your template, and insert the modification highlighted in red:
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--Show image as background to text-->
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
<!-- Start Modification. -->
<script type='text/javascript'>
var banner= new Array()
banner[0]="http://your.image.url"
banner[1]="http://your.image.url"
banner[2]="http://your.image.url"
banner[3]="http://your.image.url"
banner[4]="http://your.image.url"
var random=Math.round((banner.length-1)*Math.random());
document.write("<img src='"+banner[random]+"' style='display: block'/>");
</script>
<noscript>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</noscript>
<!-- End Modification. -->

</b:if>
Make sure you replace "http://your.image.url" with the actual url of your images, which should now allow you to display changing image banners for blogger.

15 comments:

Billy H. said...

Thanks for posting this! I was looking everywhere for how to do it. You're awesome!

x said...

Hi Billy,

Glad you enjoyed the tip! :)

Vina Revi said...

Hi Vincent,
I tried the script for my blog vina-pages.blogspot.com but it did not work out. I think because I use Beta Blogger? Do you have any idea how to adjust the script accordingly.?

x said...

Hi Vina,

It should work for both. I've checked your website - it seems like it's working on your blog too, so I guess you must have figured it out :)

Vina Revi said...

Yes, finally I figured out what was wrong. It works like a charm now!

Thank you for sharing a nice piece of work.

Anonymous said...

Hi Vincent

Thanks for your script, I had error when I inserted your script in my blog the error message was "invalid template invalid data height.."

I removed the lines from "noscript"
..." now i am getting the random animation without any errors as mentioned above

Thanks

Michael said...

Is it possible to do more than just 4 images, or do you have to tweak the code some more? I don't think I'll need more; I just wondered - because I don't really know how to write/mod scripts...

Thanks for posting, though!

Rolf Blijleven said...

I used a part of your code to get this working - thank you! It wasn't just a matter of copying the snippet, there was much more to it than that. But that's OK, I learned from it! Here is part 1 and part 2 of the full story.

All the best!

x said...

Glad it worked out for you Rolf, I'm sure the additional tips you've posted will be helpful to others as well!

Best

x said...

@Michael

Well that's easy, if you wanted more than 4 (actually 5, you forgot [0]), just keep adding the pictures url into the array, e.g:


banner[5]="http://your.image.url"
.
.
.
banner[n]="http://your.image.url"

Anonymous said...

Hello Vincent,

May you help to make each banner clickable, please

Daurade said...

Hi Vincent. I don't know if you are still maintaining this blog, but I'm gonna pose a question.

I used this script on my blog (http://lawsofsilence.blogspot.com/) and can't get it to work correctly.

First problem is that the code on my template is a bit more involved than the example here, so I'm not quite sure where to put it.

Second is that on the "Add and Arrange Page Elements" page I go into header and in addition to defining the source of the image I have three options:

Behind title and description
Instead of title and description
Have description placed after the image

This seems to affect the performance. I manage to rotate the banners, but two full banners appear. For example, the current banner defined in this box remains visible, and the others in the rotation appear below it. I have to use the "Instead of title and description" option.

I'm not sure if this a clear description of the problem but I'm wondering if you have any advice on where it needs to go. I'd appreciate it.

It's a cool script but I think the template I'm using adds a few wrinkles I can't iron out!

emily cochran said...

Hi,

I'm new to all of this editing code and whatnot and would love some help! I'm trying to rotate my banner, and I can't figure out where to insert the modified code....I can't find the exact code you have above the modified code. Maybe it has something to do with my template? Does this not work on all templates or even newer templates?

x said...

I do not do any Blogger template hacking anymore - it's likely that Blogger has changed a fair bit since then too. This post should largely be considered deprecated.

I will update the headings to this entry to reflect the case. Thanks.

Daurade said...

Aww, too bad! Thanks nonetheless.

Post a Comment