Label cloud in blogger

Passo passo come ho fatto ad inserire le etichette nella versione cloud decisamente più accattivante di quella ad elenco messa a disposizione da blogger.
Prima di cominciare a lavorare sul vostro template fate un bel salvataggio: Layout --> Modifica Html --> Scarica modello completo.

Se le etichette/tags sono già presenti sul vostro blog saltate al prossimo punto altrimenti dovete fare così:
Layout --> Aggiungi un gadget --> e aggiungete il widget con le etichette selezionando l'opzione "ordine alfabetico" e poi salvate.

Dopo aver aggiunto il widget tornate su Layout --> Modifica Html (senza espandere i modelli widget).

Cercate il codice simile a questo nel vostro modello

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

e sostituitelo con il seguente

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

<p align='center'>

<script type='text/javascript'>

var cloudMin = 1;

var maxFontSize = 25;

var maxColor = [0,255,0];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

// 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(&#39;labelCloud&#39;);

ul = document.createElement(&#39;ul&#39;);

ul.className = &#39;label-cloud&#39;;

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(&#39;li&#39;);

li.style.fontSize = fs+&#39;px&#39;;



a = document.createElement(&#39;a&#39;);

a.title = ts[t]+&#39; Posts in &#39;+t;

a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

if (lcShowCount){

span = document.createElement(&#39;span&#39;);

span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;

span.className = &#39;label-count&#39;;

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(&#39; &#39;);

ul.appendChild(abnk);

}

lc2.appendChild(ul);

</script>

</p>

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

<br/>Powered By:<small><a href='http://www.bloggerplugins.org'>Blogger Widgets</a></small>

<b:include name='quickedit'/>

</div>



</b:includable>

</b:widget>

Adesso cercate questo
]]></b:skin>

e sostituitelo con:

#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:&quot;&quot; !important}

]]></b:skin>

Salvate il modello e avrete un bellissimo Label Cloud sul vostro Blog.

Advertise

Tante novità vi aspettano su:

LA FORTEZZA DELLE SCIENZE e IL BLOG DI GLITTERVICTIM

Correte subito a leggere i nuovi articoli e le ultime notizie, le sorprese non sono finite.

Buon divertimento!

Le ferie son finite, si ricomincia.

Non ho ancora pensato a come fare ma la mission del 2009 per questo blog sarà sicuramente quella di incrementare il numero delle visite che ad oggi risulta essere pari a ... non ve lo dico perché me ne vergogno giusto quel tantino che basta a farmi diventare rossa, poi gialla, verdognola e pure un po' blu.

Mi dovrò impegnare parecchio, rimboccarmi le maniche e trovare una soluzione per "far volare" il mio bloghettino-aiuta-imbranati.

Una delle prime cose da fare sarà sicuramente cambiare il titolo, perché questo non mi è mai piaciuto. L'avevo scelto in quanto me ne serviva uno provvisorio per aprire un tester-blog che alla fine si è trasformato in un blog vero e proprio.

Mannaggia! Mi serve un altro blog degli esperimenti , ma c'è il rischio che anche quello a lungo andare si trasformi in qualcosa di più. Devo organizzarmi.

Novità coming soon, o almeno spero.