Making a tag cloud, easily

Update (August 2009)

Blogger has finally added a Cloud option in their Labels gadget. To add a Label cloud, just select Cloud option (instead of List) in Configure Labels window. With this new Labels widget you can also choose to show all or only selected labels.

-------------------------------------------------------------

I just finished installing tag / label cloud on the right sidebar. Spent some time searching for codes, and finally found what I consider as the simplest one. Made some minor alteration to it, and I thought I share it with you.

Just follow the steps below:

1. Login to your to your Blogger account.
2. Back up your template.
3. At Dashboard go to Layout>Edit HTML.
4. Make sure the Expand Widget Templates check box on top right of the HTML window is unticked/unchecked.
5. Find the following lines in your HTML codes:

   <b:section class='sidebar' id='sidebar1' preferred='yes'>
   <b:widget id='HTML3' locked='false' title='' type='HTML'/>

   This is your sidebar section, where widgets are located. The ids and other properties may not necessarily similar to the above. What’s important is the “<b:section class=’sidebar’…” tags must be there.
6. Now copy the codes below (all of them):

   <b:widget id='Label88' locked='false' title='Labels' type='Label'>
   <b:includable id='main'>
     <!-- only display title if it's non-empty -->
     <b:if cond='data:title != &quot;&quot;'>
       <h2 class='title'><data:title/></h2>
     </b:if>
   <div class='widget-content'>
   <div id='Labelcloud'>
   </div>
   </div>
   <script language='javascript' type='text/javascript'>
   function Magnifytxt() {
   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 = 80 + (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> &quot;;
   </b:loop>
   obj = document.getElementById(&#39;Labelcloud&#39;);
   obj.innerHTML = display;
   }
   Magnifytxt();
   </script>
   <b:include name='quickedit'/>
   </b:includable>
   </b:widget>

7. Insert (paste) the codes immediately below the line in step 5.

   <b:section class='sidebar' id='sidebar1' preferred='yes'>
   Insert the code here
   <b:widget id='HTML3' locked='false' title='' type='HTML'/>

8. Click PREVIEW and look for your label cloud! If it’s there, then click SAVE TEMPLATE.
9. If you want to reposition or change the name of the label cloud go to Layout>Page Elements. Just drag it to reposition or type in the new name.
10. Done.

 

Give it a try, and feedback me afterwards okay.

 

• Note: this label cloud code is based on the code by frivolousmotion.com.

Technorati Tags: widget,how to,tutorial,code