<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d16734928\x26blogName\x3dSid05+weblog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dSILVER\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://sid05.blogspot.com/search\x26blogLocale\x3dit_IT\x26v\x3d2\x26homepageUrl\x3dhttp://sid05.blogspot.com/\x26vt\x3d2587781031737933902', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tagcloud con la nuova versione di Blogger 13/07/07

Blogger tutorial

Ancora un totorial dedicato a Blogger, questa volta si tratta di realizzare una tagcloud (o label-cloud) con la nuova versione ex-beta. Per farlo abbiamo bisogno solo di modificare alcuni parametri del nostro HTML ed aggiungere alcune classi CSS...

» continua

L' esempio che vi segnalo lo trovate qui (nella versione originale), ho modificato giusto due parametri e il foglio di stile, ma vediamo come fare.

La prima cosa da fare è trovare la parte di codice relativa alle label/etichette; entrate nella modifica dell' HTML nel pannello di controllo e spuntate espandi widget. Ora scorrete la pagina fino a trovare il seguente codice (che dovrete modificare):

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

Quindi sostituite tutto il codice (da <ul> a </ul>) con questo:

<b:loop values='data:labels' var='label'>
<span expr:class='"common-link-" +
data:label.count'>
<b:if cond='data:blog.url == data:label.url'> (<data:label.count/>)
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</span>
</b:loop>

Abbiamo aggiunto solo alcune condizioni; in questo esempio ho tolto il conto dei post per etichetta, ma potete anche inserirli modificando le ultime quattro righe, in questo modo:

<a expr:href='data:label.url'><data:label.name/>(<data:label.count/>)</a>
</b:if>
</span>
</b:loop>

Ci restano da inserire le classi CSS; è molto importante considerare che (e questo è un piccolo limite di questo hack) dovremmo inserire una classe per ogni valore; in pratica se abbiamo 50 post in un' etichetta dovremmo inserire 50 classi... non vi preoccupate, è più semplice del previsto, questo è il codice CSS da aggiungere al nostro stile:

.common-link-1, .common-link-2, .common-link-3 ,.common-link-4, .common-link-5 {font-size:90%;}
.common-link-6, .common-link-7, .common-link-8 ,.common-link-9, .common-link-10 {font-size:100%;}
.common-link-11, .common-link-12, .common-link-13 ,.common-link-14, .common-link-15 {font-size:110%;}
.common-link-16, .common-link-17, .common-link-18 ,.common-link-19, .common-link-20 {font-size:120%;}

Bene, è tutto(in questo caso arrivate a 20 post per categoria, vi basterà aggiungere ulteriori classi a seconda delle vostre esigenze); esistono altri metodi per visualizzare la tagcloud con il nuovo Blogger, ma questo è sicuramente il più semplice, buon divertimento...

Etichette: , , , ,

[Sid]
del.icio.us Digg technorati Design Float http://www.wikio.it oknotizie | Permalink | |

Ultimi commenti