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

Widget Request for Blogger Beta

Do you have a feature in mind that you would see useful and yet don't have the widgetry know-how to design them? Here's the chance for you to make a request.

In my effort to present my love for the new blogger beta, I will personally design them for you. (sounds so cocky) but yes I will and it's for free. If I see that it's possible to make your wish come true, I will make it.

Just post a comment here and let the ideas roll!

Recent Post and Comments for Blogger Beta

As you can see on the sidebar of this blog, I'm able to list down the most recent Posts and Comments along with it's relevant details. The great thing about this is, there's no script to install or javascript involved. It can be easily done just by using Blogger Beta's widget feature.

1. First before you start, you'll need to find out your Blogger's Posts feed and Comments feed.
   

   http://*.blogspot.com/feeds/posts/default
   http://*.blogspot.com/feeds/comments/default

   where * represents your blog.
2. Next, log in to your blogger beta account.
3. On the dashboard under your blog title, click "Layout"
4. Once your blog layout appears, click "Add a page element" on your sidebar.
5. Choose "Feed" and add to blog.
6. Insert your Posts or Comments feed into "Feed URL".
7. Customise your settings:
   e.g. Title: Recent Posts/Comments

Also, did you know that by listing your most recent post and comments actually helps with your Search Engine Optimizations?

Happy bloggin.

Changing the Blogger Title Tag

This widget will change the Blogger's title tag to help amplify relevant keywords to your blog which improve the search engine ranking of your blog.

This is written for Blogger's Beta version and so it only works in Beta. If you're looking for the classic version, please visit Tech.Life.Blogged or Blogtimize!.

How does it work?

By default, your Blogger's title on the top left displays your blog title, and if it's in the items page, it'll include your post title as well.
e.g. Widget-based XML: Changing the Blogger Title Tag

It works the same way for labels and archives pages.

Installation

Find the following codes, near the top of your template:

<title><data:blog.pageTitle/></title>

Replace with the following code:

<!-- Start Widget-based: Changing the Blogger Title Tag -->
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> ~ <data:blog.title/></title></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='nextprev'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- End Widget-based: Changing the Blogger Title Tag -->

The trick is rather simple for the older Blogger version, but it's nearly impossible with Blogger beta without risking a little XHTML validation. This widget works well but it's only limited to items page. Meaning it'll go back to Blogger default in index, labels and archives pages.

Blogger Label Cloud

I'm a big fan of word clouds, or tag clouds. When I learned of Blogger's new post labeling system, I knew somehow that label cloud can be done. So a little Google search and I found this wonderful widget on phydeaux3.

phydeaux3's label cloud has some very nice customization features including minimum and maximum font-size, algorythm-based color changing and a choice to show count. Installation is pretty simple with only 3 different parts to copy.

I've installed it on my own blog and made a number of small changes (making it way better):

1. added minPostCount where the cloud only display the label which have at least the specified amount of post. This is useful for a large blog with too many labels.
2. reduced to only 2 parts to copy, i.e. CSS codes and widget codes.
3. Non-javascript friendly. The original label cloud only works if JavaScript is enabled. Although most people usually have JavaScript enabled, there is nothing wrong to make it JavaScript-disabled friendly. Besides, it's good for search engine indexing.
4. Using relative URL instead of absolute URL where you are required to insert your blog address, a move that I ... well ... considered as unnecessary (unless you're using FTP)

Installation in two parts:

1. CSS. Goes anywhere between the tags <b:skin> ... </b:skin>, preferably right before the end tag
   

   /* Label Cloud Styles
   ----------------------------------------------- */
     #labelCloud {text-align:center;font-family:arial,sans-serif;}
     #labelCloud  .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
     #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
     #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
     #labelCloud a{text-decoration:none}
     #labelCloud a:hover{text-decoration:underline}
     #labelCloud li a{}
     #labelCloud .label-cloud {}
     #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
     #labelCloud .label-cloud li:before{content:"" !important}

2. Widget. Goes anywhere between <b:section id="'sidebar'"> ... </b:section>
   

   <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
   <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
   
    <div class='widget-content'>
    <div id='labelCloud'>    <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <data:label.name/>
          <b:else/>
            <a expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          (<data:label.count/>)
        </li>
      </b:loop>
      </ul></div>
   <script type='text/javascript'>
   // Label Cloud User Variables
   var maxFontSize = 20;
   var maxColor = [168,181,248];
   var minFontSize = 8;
   var minColor = [0,0,0];
   var lcShowCount = false;
   var minPostCount = 0; //integer
   
   // Don't change anything past this point -----------------
   function s(a,b,i,x){
        if(a>b){
            var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
               }
        else{
            var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
            }
        return v
     }
   
   var ta=0;
   var c=[];
   var labelCount = new Array(); 
   var ts = new Object;
   <b:loop values='data:labels' var='label'>
   <b:if cond='data:label.count'>
   if (<data:label.count/> &gt; minPostCount) ts[&quot;<data:label.name/>&quot;] = <data:label.count/>;</b:if></b:loop>
   
   for (t in ts){
       if (!labelCount[ts[t]]){
             labelCount[ts[t]] = new Array(ts[t])
             }
          }
   tz = labelCount.length-1;
   lc2 = document.getElementById('labelCloud');
   lc2.innerHTML = '';
   ul = document.createElement('ul');
   ul.className = 'label-cloud';
   for(var t in ts){
      for (var i=0;3 &gt; i;i++) {
               c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
                }     
           var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
           li = document.createElement('li');
           li.style.fontSize = fs+'px';
           li.style.lineHeight = '1';
           a = document.createElement('a');
           a.title = ts[t]+' Posts in '+t;
           a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
           a.href = '/search/label/'+encodeURIComponent(t);
           if (lcShowCount){
               span = document.createElement('span');
               span.innerHTML = '('+ts[t]+') ';
               span.className = 'label-count';
               a.appendChild(document.createTextNode(t));
               li.appendChild(a);
               li.appendChild(span);
               }
            else {
               a.appendChild(document.createTextNode(t));
               li.appendChild(a);
               }
           ul.appendChild(li);
           abnk = document.createTextNode(' ');
           ul.appendChild(abnk);
      }
    lc2.appendChild(ul);   
   </script>
   
      <b:include name='quickedit'/>
    </div>
   
   </b:includable>
   </b:widget>

After installing, you'll just have to make changes to the variables to suit your blog best. The bold section is where you customise your settings.

I think it's pretty straight forward how this is used, incase you need more explanation you can get a complete documentation on phydeaux3.

Have fun.

Widget-based XML

The new blogger beta has a brand new template system. It is constructed in sophisticated XML format and it comes with a brand new cool feature, widgets.

Unlike the classic method, the new system is difficult to understand and very much hard to edit (in terms of looking at source codes, and to design new templates from scratch). It kinda limits creativity for all my 14 year old design girls. So, with the countless amount of time I have on my hands I decided to express my love for Blogger and XML by doing the dirty work.

Oh by the way, yes it's free.