Com podeu veure a la barra lateral fa poc dies vaig posar un núvol d'etiquetes canviant la simple llista d'etiquetes. Degut a la gran allau de consultes que he rebut via mail sobre com he fet aquest núvol d'etiquetes, és broma només m'ho ha demanat el Miquel, posaré un petit tutorial sobre com crear-lo extret d'una altre
web en anglès.
Per tal d'aconseguir aquest senzill efecte de les etiquetes, heu d'anar al administrador del vostre blogger a la secció Plantilla->Modificar HTML, per començar deixeu NO sel·leccionat "Expandir models de widgets".
Tan sols heu de seguir els següents 3 passos, abans però assegureu-vos de fer una copia del template que teniu, clicant a "Baixar model complet".
- Insertar el codi de l'estil dins els tags <b:skin>...</b:skin>.
- Insertar la configuració de la secció del núvol.
- Canviar el widget d'etiquetes.
Comencem doncs...
1. Insertar el codi de l'estil dins els tags <b:skin>...</b:skin>.Per tant abans de
</b:skin> inserteu el següent codi:
/* 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;
}
2. Insertar la configuració de la secció del núvol.Després del tag
</b:skin> però abans del tag
</head> inserteu el següent codi:
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://pastoretdelamuntanya.blogspot.com';
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [75,185,75];
var minFontSize = 11;
var minColor = [255,255,255];
var lcShowCount = false;
</script>
Canvieu la variable
lcBlogURL per la URI del vostre blog!
3. Canviar el widget d'etiquetes.Busqueu un codi semblant a aquest:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>i substituiu-lo pel següent:
<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>
</b:includable>
</b:widget>
El resultat serà:
