How to add label cloud for blogger

I myself a very big fan on Label cloud also known as tag cloud. Instead of showing labels in a row, label cloud shows the size of the category/label content by increasing the size of its font if the particular label is having a large post when compared to other labels and vice versa. And i find this hack very interesting,and credits and thanks to phydeaux3 . This hack is very simple to install and will easily fill your minds.


The code comes in 3 parts. A section for the stylesheet, a configurations section,
and then the actual widget itself. Now let me show you the hack, how you can install label cloud to your blogger.

Note: Before installing label cloud to your blog make sure you have a label page element added to your blog, sorted in alphabetical order.

  1. Login to Blogger with your ID
  2. Click on Layout
  3. Click on HTML Tab
  4. And do not Expand Widget Template
  5. just scroll down or (Ctrl+F) and search for this line of code
  6. ]]></b:skin>
  7. Right before this code paste the below code
  8. /* Label Cloud Styles----------------------------------------------- */
    /* Adopted by http://bloggers-university.blogspot.com/ */#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 03px;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}
  9. And now after ]]></b:skin> and before </head> paste this code
  10. <scripttype='text/javascript'>
    // Label Cloud User Variables
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    </script>
  11. And finally find for this line of code
  12. <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
  13. And replace the above code with the following code
  14. <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
    /*Created by http://phy3blog.googlepages.com/ and Adopted by http://bloggers-university.blogspot.com/ */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/>
    <aexpr:href='data:label.url'><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:loop>
    </ul>
    </noscript>
    <b:includename='quickedit'/>
    </div>

    </b:includable>
    </b:widget>
  15. Save your Template and your done !!!.

Please view your blog now to see the beautiful hack to work like a charm. More information on playing with the hack can be read here by the original Author phydeaux3 .



Hope you like this post of ours, to read more post of similar and many more on blogging, enter your email and subscribe with us to recieve updates of this blog via email or subscribe to as a reader.
Subscribe in a reader


Bookmark this post:
StumpleUpon Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google



Do you think this post is worth reading and would you like to help our work, if so please bookmark this post for us and lets share it with others.

Link to this post:

People who read this post, also read:



Comments :

1
Ben of AusMedWeb said...
on 

Another great suggestion for beautifying your blog. I must have made a small mistake when copying and ended up with 'Created by http://phy3blog.googlepages.com/ and Adopted by http://bloggers-university.blogspot.com/ ' plastered right up the top of the blog. Easy to remove though!

Thanks again.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

What do you think of this post ?

Newer Post Links Older Post Links Go To Home