Make sure you backup your template before making any changes!

Log into Blogger and go to your layouts section. On the 'Page Elements' setup page
make sure you have a label widget already installed where you want it (it can be moved around
later). Then go to the Edit HTML settings and leave the widgets NOT exapanded. It will make
things easier to deal with.


Now the code comes in 3 parts. A section for the stylesheet, a configurations section,
and then the actual widget itself.

The first part to put in is the stylesheet section. The following code needs to be copied
and inserted into your stylesheet, which in the layouts is marked out by the tags.
Easiest thing to do is find the closing skin tag

]]>

and place the code right BEFORE that.
Here it is, copy and paste without modification right now. I'll explain what can be tweaked
later.



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




This next section is the configuration section for the Cloud. It also goes in the head
of the template, but outside of the stylesheet part. Easiest thing to do again is to find
the closing stylesheet tag

]]>

But this time place the code right AFTER that line, but BEFORE the tag. Here it is.



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




All of these settings can be changed but I'll explain them in a moment. The defaults will work for now.


Now the widget itself. Scroll down and find the label widget in your sidebar. It should look
something like this.





Copy the following code (from beginning widget tag to ending widget tag) and replace
the line above with it.













// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>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;

var theName = "";
ts[theName] = ;


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] < cloudMin){
continue;
}
for (var i=0;3 > 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);

• 
  
  
  
  
  
  ()
  

Now if all has gone well, and you have posts already labeled, then if you preview the
blog you should see some form of the Cloud appearing. If it doesn't appear, then something
went wrong. You should probably back out and try it again from the start.

Update : I've found 2 things to check for first if the label cloud isn't showing. First make sure that at least one of your labels has more than one entry. A bug in the script causes it to fail when all the labels have only one entry.(As soon as any label has more than one entry, then it should be ok from then on) Also, make sure that none of your labels contain quote marks " . Apostrophes or single ticks ' are ok. ------

Most likely the cloud with it's default settings won't be what you ultimately want. But all
the colors and sizes are configurable to match your tastes. If the cloud is appearing in preview
then you can go about changing some of the variables so they suit.


The settings in the Variables section will be where you make most of your adjustments. Here I'll
explain what each setting does.

var cloudMin= 1;

This setting you can use to limit the number of labels shown (for example if you have a lot of labels). Leave the setting at 1 to show ALL labels. If you enter in a higher number, then only labels that have at least that number of entries will appear in the cloud.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

The lines for
maxFontSize
maxColor
do what you may think they do. The first one sets the size (in pixels) of the label with the
most amount entries. The maxColor sets the color of that entry (in RGB format). Similiar with
the next two
minFontSize
minColor
Just these are for the label with the least amount of entries. Again the size is in pixels,
the color is in RGB format. Any labels between the two will get their color/sizes based on
how many labels they are, and where their entry count falls, giving the much desired cloud
effect.

check out the worlds greatest library at
creativehuman.blogspot.com

Reply