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?

Adding Technorati tags using Beta Labels

I'm pretty sure many people have attempted to create such a hack. Or maybe there's already several versions out there. This function basically uses your Blogger Labels, and create a link to Technorati. This saves you the time and effort to create each links one at a time.

Installation:

1. Go to layout, and click on "Edit HTML"
2. Tick "Expand Widget Templates"
3. Now, the most difficult part is to find the following codes:
   

         <div class='post-labels'>
           <b:if cond='data:post.labels'>
             <data:postLabelsLabel/>
             <b:loop values='data:post.labels' var='label'>
               <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
             </b:loop>
           </b:if>
         </div>

   Tip: search for "post-labels" using your browser's search feature (i.e. Ctrl+F)
4. Replace with the following codes:
   

         <div class='post-labels'>
           <b:if cond='data:post.labels'>
             <data:postLabelsLabel/>
             <b:loop values='data:post.labels' var='label'>
               <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
             </b:loop>
             <br/>Technorati:
             <b:loop values='data:post.labels' var='label'>
               <a expr:href='"http://www.technorati.com/tag/"+data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
             </b:loop>
           </b:if>
         </div>

   Bold represent codes that were added while Italic represent an optional code, whether you want the labels or not.

Blogger Beta Template: Tremor

This is my first ever blogger beta template, I'm really proud of myself for completing this. This template isn't done lazily, it is fully compatible with Blogger. This means I took the extra time and effort to make sure it works in "Page Elements" and "Font and Colors".

Tremor - Blogger Beta Template

To install:

1. Download the template XML.
2. Go to your blog layout and click "Edit HTML"
3. Click on "Download Full Template" to make a backup copy of your original blog template
4. Upload the Tremor template XML onto your blog
5. Once uploaded, go to "Page Elements" and make customization to your blog.

Easy as pie. Have fun.

Tremor - "Page Elements" view

What is included?

Apart from what you can see in the "Page Elements" view above, there's two other widgets that I've included:

• Changing the Blogger Title Tag
• Blogger Label Cloud