Tuesday, December 05, 2006

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".


  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'/>
    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'/>
    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;">');
  5. Now, all you need to do is just insert your selected image URLs into the bolded text.
Simple isn't it?