Setup and configuration for New Blogger Tag Cloud / Label Cloud

Here is the code and setup information to use the Label Cloud in New Blogger. First you obviously have to have a blog on New Blogger, and you MUST be using the layouts templates, (this isn't available for classic templates, or FTP published blogs ) and you must have some posts labeled already. (There needs to be at least ONE label with more than ONE entry or the scripts hit a bug - so have at least one label with more than one entry before starting).

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,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 '/head' tag. Here it is.

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

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.

<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>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 = "<data:label.name/>"; 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] < 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); </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> </div> </b:includable> </b:widget>

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.