How to add a rotating banner to your Blogger beta header?

Sidney Shapiro have requested for a widget that would rotate banners in his Header section. I hope that many would find this useful as well.

This widget is pretty simple and straight forward but installing it may require some "work around".

Installation:

1. First of all, we'll need to force the Header section to allow adding of other Page Element.
   
   To do this, go to Layout -> Edit HTML and look for the following codes.
   

       <div id='header-wrapper'>
        <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Widget-based (Header)' type='Header'/>
   </b:section>
      </div>

   See the bold text? maxwidgets and showaddelement needs to be reconfigured.
   
   

       <div id='header-wrapper'>
        <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
   <b:widget id='Header1' locked='true' title='Widget-based (Header)' type='Header'/>
   </b:section>
      </div>

   Click Save Template.
2. Now, go to Page Elements. In the header section where you want to insert the rotating banner, click Add a Page Element.
3. Under "HTML/JavaScript", click "Add to Blog".
4. Insert the following codes:
   

   <script type="text/javascript">
   var banner = new Array();
   
   banner[banner.length] = "http://static.flickr.com/84/269053449_acad87a793_o.jpg";
   banner[banner.length] = "http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg";
   banner[banner.length] = "http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg";
   banner[banner.length] = "http://static.flickr.com/108/269053262_608edbdda4_o.jpg";
   banner[banner.length] = "http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg";
   
   var random = Math.round(banner.length*Math.random());
   document.write('<img src="' + banner[random] + '" style="border: 0;">');
   </script>

5. Now, all you need to do is just insert your selected image URLs into the bolded text.

Simple isn't it?