Saturday, August 02, 2008

Label Cloud wedgit in New Blogger Users


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, which in the layouts is marked out
by the <b:skin> tags.



Easiest thing to do is find the closing skin tag







]]></b:skin>







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







]]></b:skin>







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.











<b:widget
id='Label1' locked='false' title='Labels' type='Label'/>












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











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.







From my experimenting, there are many factors that make up a pleasant
looking cloud. From



color/size choice, to the number of actual labels, to how well
dispersed the entries are amoung



the labels. 3 Labels don't make a good cloud as there isn't much to
work with. You just have



to experiment around to see what looks good with your setup.







IMPORTANT, when change the color settings, Keep them in the format
supplied. In between the [] and



the numbers separated by commas. The default colors are BLUE for the
max and BLACK for the min.



You can select any valid RGB color combination. If you don't know what
RGB colors are, don't



worry. It's just a way of defining a color. You can use many charts on
the Internet to



get the correct RGB value for the color you want to try. Here's one
that is fairly good.






RGB
Color Code Chart








Remember, if you get the 3 sets of numbers to enter them in correctly.
Inside the [ ] separated by



commas.







Also experiment with different font sizes. Again it depends on how many
entries, how dispersed



they are, and how much room for the cloud is available as to what looks
good.






The last variable there is






lcShowCount







This can either be false (default) or true. All this does is turn
off/on the post count displayed



next to the label. Usually in a 'traditional' cloud the count isn't
used. But if you go to a



'flat' listing then it's sometimes useful to turn it on.







Now to the CSS section. Most people won't need to tweak these much, and
it's not necessary to



understand what all those entries are for. Most are just to make sure
that other styling



elements from the rest of your page don't inherit in and ruin the
cloud. But there are a few



that you may want to change to suit.



The first line








#labelCloud {text-align:center;font-family:arial,sans-serif;}








You could change the fonts used in the cloud here if you wanted.



Also, the text-align statement can also be changed. I have it set to
center by default but you


could use







text-align:justify;


text-align:right;


text-align:left;







If those suit better.







The next line








#labelCloud .label-cloud
li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline
!important;border:0 !important;}








Well don't worry about most of it unless you are a hardcore CSS'er. The
only one of real



importance is the first entry







display:inline;







You can change that to







display:block;







To get the 'Flat' (each entry on it's own separate line) listing of the
weighted entries.



Usually if that is set to block you would probably want to change the
sort frequency from



alphabetical to frequency. You
do that by editing the widget from the Page Elements tab in



Blogger.







And the last bit I'll mention is the line







#labelCloud .label-count







If you set the lcShowCount variable to true to show the post counts,
you could change the

color/size of those numbered entries with that line.

Share |

No comments yet

Topics

 
Embed Wave to Blogger