Making Tag / Label Cloud in New Blogger Template

Update : This tutorial is no longer compatible, please read the latest tutorial, click here!

Hello, Friends, today is Ramadhan Month, I would like to say sorry if I have some mistakes to you and I have forgiven your mistakes too. In this beautiful day, I would like to try to respond one question that many friends have asked to Kang Rohman, the question is about how to make Tag / Label Cloud in New Blogger Template (xml).

In order to make a label cloud, I will use the technique of phydeaux. Before reading and applying this tutorial, make sure that you have added label element in your blog. Before doing this one, make sure that your blog uses a Label. Ok my friends, here are the steps;

 

1. Sign in into blogger
2. Click Layout menu
3. Click Edit HTML tab
4. Click Download Full Template, and then save the data to back up if you make mistakes in editing the template code.
5. Click Expand Widget Templates to give a check.

    

   

6. Wait the process for a few second
7. Save the following code between <b:skin><![CDATA[ and
   ]]></b:skin> or if you are still confused, just save the code right above ]]></b:skin>.

    

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

    

8. Copy and Paste the following code after ]]></b:skin> and before </head> or if you are still confused, just save right above </head>.
   <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>

9. Find the following code in your template

    

   <b:widget id='Label1' locked='false' title='Labels' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   
   <h2><data:title/></h2>   
   </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/>
   
   <b:else/>  
   <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>

    

    

10. Change the code above with the code 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>
    
    
    

    
    
    

     

11. Click SAVE TEMPLATES button
12. Finish

 

Good luck my friends.

If you enjoyed this article, subscribe to receive more great content just like it.

Subscribe via RSS Feed

Privacy guaranteed. We'll never share your info.

Related posts:

Save and Share!

Stumble Digg Tweet Save Reddit More