Making Label Cloud

·







Buzz It

On a wordpress blog you can create a tag cloud label. But generally on a blogger blog, we can’t see it, You can modify your Label in a blogger blog.
Here are the steps:

  1. First, make sure that you have added label element in your blog.
  2. Sign in into blogger Account
  3. Click Layout menu --> Edit HTML tab
  4. Back Up Your Template with Click Download Full Template (if you make mistakes in editing the template code)
  5. Click Expand Widget Templates
  6. Find code ]]></b:skin>
  7. Save the following code above ]]></b:skin>


  8. /* 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}



  9. Then, Copy and Paste the following code before or above </head>

  10. <script type='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. Find the following code in your template


  12. <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'></b:if>
    <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/><a expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>



  13. Change the code above with the code below.


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



  15. Click SAVE TEMPLATES button

  16. Finish

Related Posts



4 comments:

mizan said...
June 20, 2009  

kok gak mau bergerak

Gary Abraham said...
August 02, 2009  

sama, kok gak mau bergerak ya....

Author's said...
August 03, 2009  

script yang ini emang tidak bergerak. Untuk yang bergerak sabar ya, tinggal tunggu schedule posting. Thanks

Antariksa said...
August 30, 2009  

wah klo punya aku malah bukan dak gerak, tp malah dak bisa. Apa da yg salah ya. Padahal step by step dah aku ikuti dgn teliti

Post a Comment

Translator

Custom Search
Indonesia English French German Spain Italian
Dutch Russian Portuguese Japanese Korean Arabic

Wallpaper

Ceck These Out

-->

U'R Comment



-->