Set Up Label Cloud or Tag Clod

In this article i am going to tell you how you can set up Label Cloud or Tag cloud in your Blogger Blogs.
Actually there is three diffrent codes which you have to add in your blog. These three parts are CSS or Stylesheet part, Configuration Part and Widget Part. Now we are going to add these but before adding these code backup your existing Template so that occuring of any mistake you can restore it. For downloading existing Template go to Layout, Edit HTML and Click on  Download Full Template save it to your Computer.

Now adding Label Cloud

1. Login your Blogger account.
2. Click Layout --> Edit HTML
3. Find out in template this code ]]></b:skin> (if you are not able to
    find manually then click "ctrl+F" .
4. Copy and Paste  Code given below in Box before it. Just Like in
    Box.

/* 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}
]]></b:skin>

5. Now we move to the configuration section this is also goes in head
    section of our template but out side the stylesheet part.
6. Now copy and paste given code below in Box just below this line
    ]]></b:skin> But before tag. or do just like in box given
    below.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [102,102,255];
var minFontSize = 10;
var minColor = [255,0,0];
var lcShowCount = false;
</script

 7. Now we came to end part widget section. Fine this line in bold in
     your template 
    <b:widget id='Label1' locked='false' title='Labels' type='Label'/> 
    or it may be different but like this. Actually this related to your
    label widget. If you are not able to find this make sure you have
    installed Label widget in your Template, if not install but before
    move save setting by click Save Now below. Some time people
    change its name to Category.Still not able to find search this part
    only <b:widget id='Label.

8. When you find this replace the whole code with code given in
     box below.

<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'/>
<script type='text/javascript'>


// 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('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
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('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>


<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>

 9. Now save your template and see your blog.


Now changing some values.


If you not like your existing tag Cloud colous, Font size, Tag no. etc you can change these.
The vales given in red above in code are changeable. Below are some information related to these vales.


var cloudMin = 1;   ==> This represent the no. of tags in your tag cloud. 1 is min no to show in widget, if you increase the no. from 1 then that tag or label will not appear in widget untill that no. of post are not available.
if you want all Label to appear in label cloud then leave it to 1.

var maxFontSize = 20; ==> this is for max font size. You can set your max font size by changing 20 to any value you want.

var maxColor = [102,102,255]; ==> This is for maximum font size color for tag of tag cloud. You can change this value to any other colour value. Here 102,102,255 represent light blue. These vale called as RGB and Hexadecimal Color Code, You can find these code to this site : ( web-source dot net/216_color_chart.htm )

var minFontSize = 10;  ==> This value is for minimum font size.

var minColor = [255,0,0]; ==> This value represent minimum font size color for tag of tag cloud. Here 0,0,255 value represent red color.

Share: