Multi-style labels widget for Blogger Beta Combobox or Menu Labels

Share |

Multi-style labels widget is my first complete widget for Blogger Beta. It supports 2 custom styles (zoom style!, menu style) and the default list style provided by Blogger. The idea is to allow your blog's visitors to choose the style that they like instead of you fixing one particular style. I am also introducing zoom style that displays labels with font size proportionate to their usage! (sorta like a cloud but not exactly).

Interested in a hands-on experience of how this works? Check out the Multi-style labels widget in my sidebar. There are three icons one for each style - just click any icon and you will see the labels in that style. I have set zoom style as the default style.

- Icon for list style
- Icon for menu style
- Icon for zoom style

Excited about this? Try it in your blog. First, goto Template->Page elements tab and remove your label element IF you have one. Then, goto Edit HTML tab (no need to expand widgets) and identify the start of the sidebar section by looking for this line.

<b:section class='sidebar' id='sidebar' preferred='yes'>

Insert the code as follows after above line

<b:widget id='Label2' locked='false' title='Categories' type='Label'>
<b:includable id='main'>  
  <a href='javascript:void' onclick='javascript:linkStyle();' title='Switch to List'>
  <img src='http://i300.photobucket.com/albums/nn6/tejash_p_shah/list.jpg'/></a>
  <a href='javascript:void' onclick='javascript:menuStyle();' title='Switch to Menu'>
  <img src='http://s300.photobucket.com/albums/nn6/tejash_p_shah/menu.jpg'/></a>
  <a href='javascript:void' onclick='javascript:zoomStyle();' title='Switch to Zoom'>
  <img src='http://s300.photobucket.com/albums/nn6/tejash_p_shah/zoom.jpg'/></a>
  <b><a href="http://technical-tejash.blogspot.com"> ? </a></b>
  <br/>
  <div class='widget-content'>
  <div id='LabelDisplay'>
  </div>
  </div>

  <script language='javascript' type='text/javascript'>
  function zoomStyle() {
    var max = 0;
    var min = 10000;
    <b:loop values='data:labels' var='label'>
    if (<data:label.count/> &gt; max)
         max = <data:label.count/>;
    if (<data:label.count/> &lt; min)
    min = <data:label.count/>;
    </b:loop>
    var display = &quot;&quot;;
    <b:loop values='data:labels' var='label'>
      var delta = <data:label.count/> - min;
      var size = 100 + (delta * 100) / (max - min);
      display = display + &quot;<span style='font-size:&quot; + size + &quot;%'><a expr:href='data:label.url + &quot;?max-results=100&quot;' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>&quot;;
    </b:loop>

     obj = document.getElementById(&#39;LabelDisplay&#39;);
     obj.innerHTML = display;
  }

  function menuStyle() {
     var display = &quot;<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a Category</option>&quot;;
     <b:loop values='data:labels' var='label'>
       display = display + &quot;<option expr:value='data:label.url + &quot;?max-results=100&quot;'><data:label.name/> (<data:label.count/>)</option>&quot;;
     </b:loop>
     display = display + &quot;</select>&quot;;

     obj = document.getElementById(&#39;LabelDisplay&#39;);
     obj.innerHTML = display;
  }

  function linkStyle() {
     var display = &quot;<ul>&quot;;
     <b:loop values='data:labels' var='label'>
       display = display + &quot;<li><a expr:href='data:label.url + &quot;?max-results=100&quot;'><data:label.name/></a> (<data:label.count/>)</li>&quot;;
     </b:loop>
     display = display + &quot;</ul>&quot;;

     obj = document.getElementById(&#39;LabelDisplay&#39;);
     obj.innerHTML = display;
  }

  // set default to zoom style
  menuStyle();
  </script>

    <b:include name='quickedit'/>
</b:includable>
</b:widget>

Once you have inserted, you could goto Page elements tab and move this new Labels element. If you don't want the combo, you could use the zoom style alone by inserting the widget code from here.

I hope this widget will encourage many bloggers to switch to Beta and take the hit of labelling all their posts. This also proves how effectively we could combine Javascript with Bloggerscript (the new template language :)) and develop some cool widgets!

Share |