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 aroundlater). Then go to the Edit HTML settings and leave the widgets NOT exapanded. It will makethings 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 copiedand inserted into your stylesheet, which in the layouts is marked out by the
]]>
/* 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}
<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>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<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.usfunction
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>
</b:includable></b:widget>
Now if all has gone well, and you have posts already labeled, then if you preview theblog you should see some form of the Cloud appearing. If it doesn't appear, then somethingwent 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. ------
No comments:
Post a Comment