Blogger Templates Designs Plugins Widgets Hacks Tips Tricks Tutorials: Blog Widgets

Blogger Hacks- How To Put Widgets Label Cloud Or Widgets Tag Cloud On Blogger Sidebar

A tag cloud or label cloud for blogger is a list of all the labels used within a blogger blog displayed with style.You can see a demo of the Label cloud widget here on my site. This Tag Cloud Widget was originally developed by phydeaux3. I have just simplified and made it easier to install..

You can see a good implementation of this label cloud widget on one of our readers blog -Speak Media Blog.
First Of all Goto Your blogger Layout>Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that page.

Blogger Hacks- How To Put Widgets Label Cloud Or Widgets Tag Cloud On Blogger Sidebar

Choose to sort the labels Alphabetically when prompted.

After Adding the Label Widget Goto Layout>Edit Html (Do not expand the widget templates for the sake of easy explanation)

You will find some code similar to


<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Add Code New


<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'/>
  <p align='center'>
  <script type='text/javascript'>
  var cloudMin = 1;
  var maxFontSize = 25;
  var maxColor = [0,255,0];
  var minFontSize = 10;
  var minColor = [0,0,0];
  var lcShowCount = false;
  // Don't change anything past this point -----------------
  // Cloud function s() ripped from del.icio.us
  function s(a,b,i,x){
  if(a&gt;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 c=[];
  var labelCount = new Array(); 
  var ts = new Object;
  <b:loop values='data:labels' var='label'>
  var theName = &quot;<data:label.name/>&quot;;
  ts[theName] = <data:label.count/>;
  </b:loop>
for (t in ts){
  if (!labelCount[ts[t]]){
  labelCount[ts[t]] = new Array(ts[t])
  }
  }
  var ta=cloudMin-1;
  tz = labelCount.length - cloudMin;
  lc2 = document.getElementById(&#39;labelCloud&#39;);
  ul = document.createElement(&#39;ul&#39;);
  ul.className = &#39;label-cloud&#39;;
  for(var t in ts){
  if(ts[t] &lt; cloudMin){
  continue;
  }
  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(&#39;li&#39;);
  li.style.fontSize = fs+&#39;px&#39;;
a = document.createElement(&#39;a&#39;);
  a.title = ts[t]+&#39; Posts in &#39;+t;
  a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
  a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
  if (lcShowCount){
  span = document.createElement(&#39;span&#39;);
  span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
  span.className = &#39;label-count&#39;;
  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(&#39; &#39;);
  ul.appendChild(abnk);
  }
  lc2.appendChild(ul); 
  </script>
  </p>
  <noscript>
  <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>
  </noscript>
  <b:include name='quickedit'/>
  </div>
</b:includable>
 </b:widget>

Now find


]]></b:skin>

Add CSS Label Cloud Widgets for Blogger


#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:&quot;&quot; !important}
]]></b:skin>