Sunday, December 7, 2008

how you can install label cloud to your blogger


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.



  • Login to Blogger with your ID

  • Click on Layout


  • Click on HTML Tab

  • And do not Expand Widget Template

  • just scroll down or (Ctrl+F) and search for this line of code

  • ]]></b:skin>
  • Right before this code paste the below code

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

  • And now after ]]></b:skin> and before </head> paste this code


  • /*Created by http://phy3blog.googlepages.com/ and Adopted by http://bloggers-university.blogspot.com/ */
    <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>

  • And finally find for this line of code

  • <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
  • And replace the above code with the following code


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



             
    <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>
  • Save your Template and your done !!!.



  • 0 comments:

    Friends

    Popular Posts

    Advertisement

     

    Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com