Home » , » Installazione e configurazione per la Blogger Tag Cloud / Etichette Cloud

Installazione e configurazione per la Blogger Tag Cloud / Etichette Cloud

Written By elektrojoke elektrojoke on lunedì 3 marzo 2008 | 00:19

Ecco il tanto atteso post su come trasformare le nostre etichette in tag could, in base al numero di posts presenti con quella etichetta il tag diventa più grande e di colore diverso.
Questo codice funziona con gli ormai noti modelli di template blogger che usano xml e non i primi template che usano solo xhtml.




Procediamo, come al solito facciamo un backup, e andiamo in modifica,layout,html, lasciamo i widget cosi come sono cioè non espansi:
Ora il codice è disponibile in 3 parti. Una sezione riguardante il foglio di stile css, una sezione per la configurazione, e poi l'effettiva widget.
1- Nella sezione css riguardante lo stile aggiungiamo il seguente codice, in pratica prima di questo tag
]]></ b:skin>

/* 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- ora prima della chiusura del tag /head inseriamo il seguente codice javascript che contiene:
max sono i colori e la grandezza massima per le etichette più numerose, min per il colore e la grandezza minime delle etichette meno numerose


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


3- passiamo all' inserimento del nostro widget, troviamo la seguente riga:


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



selezioniamo e sostituiamo con il seguente codice:






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




ora salvate si dovrebbero vedere le nuvole ti tag delle nostre etichette, per cambiare i valori dei colori edelle grandezze basta andare a ststituire nel codice js del passaggio 2 il valore max dei colori è 255, per la grandezza non esagerate. fatemi sapere a presto..






Share this article :

10 commenti:

  1. Ciao ragazzo...volevo chiederti un consiglio...come cazzo fai a fare il discorso dei PayPal...?

    so bene il sito e tutto dove devo andare, ma cosa comporta ciò...?

    RispondiElimina
  2. Ciao Elektrojoke!

    Inutile dirti che il tuo blog è un piacere per gli occhi e per la mente di chi, come me, cerca di esplorare, da autodidatta, gli sconfinati meandri dell'html.

    Ordunque ti porgo un paio di domande, spearando che tu abbia tempo e voglia di rispondermi.

    La prima mi porta ad associarmi al precedente commento, ovvero su come diavolo funzionano sti diavolo di paypal. E' sicuro dare il proprio recapito tel ed indirizzo?

    La seconda attiene al mio desiderio di inserire in un blog di futura (e spero prossima) rinascita, sempre su blogger, della doppia sidebar.

    Altre mille domande vorrei farti, ma non voglio abusare della tua sperata pazienza.

    Ciao e Grazie

    RispondiElimina
  3. Ciao Elektrojoke.

    Inutile dirti che il tuo blog è un piacere per la vista e la mente di chi, come me, s'impegna da autodidatta nel tentativo di esplorare i meandri talvolta oscuri e complessi dell'HTML.

    Per tal ragione, sempre sperando che vorrai rispondermi, vorrei porgerti tre domandine.

    La prima è pienamente conforme a quella del commento che mi precede. Ovvero: come diavolo funzionano sti paypal. Nel senso: è sicuro fornire il proprio indirizzo e numero telefonico?

    La seconda domanda attiene alla doppia sidebar. Infatti, mi piacerebbe molto riuscire ad inserirla nella futura (e spero prossima) ri-nascita di un blog condiviso con amici, sempre su piattaforma blogger.

    Terza ed ultima domandina, sperando di non averti finora tediato troppo, attiene al logo nell'indirizzo.
    Questo è stato per me, davvero, un grosso problema in passato in quanto, seguendo (sempre da autodidatta) le varie e vaghe informazioni che son riuscito a trovare sul web, mi imbatto sempre nello stesso dilemma: come diavolo posso inserire nel layout del blog un'immagine che risulta di formato sconosciuto a blogger?
    Spero di essere stato abbastanza chiaro nel mio essere pecoreccio su simili argomenti.

    Ti ringrazio anticipatamente per la pazienza e. mi auguro - per le risposte, laddove vorrai fornirmele; e mi scuso per non avere un indirizzo web da fornirti, magari per venirci a trovare sul web ...poichè, come ti dicevo il blog è in costruzione, per ora, solo mentale. Grazie ancora e ciao.

    RispondiElimina
  4. Ciao anonimo allora per quanto 1-riguarda pay pal è sicurissimo fornire i tuoi dati, però assicurati che sia il sito di paypal,
    2-per la doppia side bar inserirò un post dove indicherò un sito con tanti templete a tre colonne senza dover mettere mani al codice se vuoi ti inserisco io il yemplate.
    3-inserirò anche un post su come mettere il logo nell' indirizzo nella barra di navigazione.

    in favore chiedo solo tanti clik alle publicità..un saluto
    ciao

    RispondiElimina
  5. Non riesco a completare la modifica, poichè nel mio layout html, non c'è il codice che te segnali nel terzo passaggio, ho controllato milioni di volte, ne sono sicuro!!!
    Come posso fare?!?!? Ti prego di darmi una mano, sto impazzendo...puoi rispondere anche a inkispunk[at]gmail[dot]com!!!

    Il mio blog è www.inkiostrando.blogspot.com

    RispondiElimina
  6. ciao! gran bel post!
    una cosa sola..
    a me credo siano usciti i tag in base al numero di 'presenza', quindi i + numerosi all inizio.. non ci sarebbe un modo di metterlo chessò random o cmq magari anche alfabetico come hai fatto te?
    l'ideale per me (e anche graficamente credo)sarebbe una cosa assolutamente casuale..
    c'è modo di modificarlo? grazie

    RispondiElimina
  7. ciao
    ho rifatto la procedura ed ora dovrebbe essere a posto..
    ma rimane cmq il fatto di non essere in ordine alfabetico :|
    qual'è la stringa che lo comanda?
    ciao e grazie ;)

    (tranq ho cambiato nome dan->loz)

    RispondiElimina
  8. ok perfetto!
    c'è la possibilità di modificare per frequenza o alfabetico nell 'aggiungi elementi'
    Ciao e grazie ancora

    RispondiElimina
  9. grazie per questo articolo mi è stato utile

    RispondiElimina
  10. DI NIENTE ANZI VI CHIEDO SCUSA SE ALCUNI POSTS DEL MIO BLOG NON SONO PIù UTILI MA NON HO TANTO TEMPO DA STARE DIETRO..MA QUANDO HO 5 MINUTI MI FA PIACERE SEGNALARE COSE UTILI..UN SALUTO A TUTTI...

    RispondiElimina

 
Il blog non rappresenta una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n. 62 del 7.03.2001. Elektrojoke.blogspot.com non è collegato ai siti recensiti e non è responsabile per i loro contenuti. Tutti i nomi, i loghi e i marchi registrati citati o riportati appartengono ai rispettivi proprietari.
Support : SiteMap | Your Link | Your Link
Copyright © 2013. ElektroBlog - All Rights Reserved
Created by Sitotu
Powered by Blogger