Tag-Cloud unter Blogger.com

Den Code dazu habe ich von phydeaux3 und schreibe diesen hier nur nieder, da ich nicht weiss wie zukunftssicher die Google Pages noch sind (nicht dass mir der Code verloren geht).

Um eine Tag-Cloud zu erstellen, muss zuerst das Standard-Gadget "Labels" hinzugefügt werden: Innerhalb der Blog-Administration unter dem Reiter "Layout" der Menüpunkt "Seitenelemente". Es sollte das Layout erscheinen. Je nachdem wo die Tag-Cloud erscheinen soll auf d"Gadget hinzufügen" klicken und dort das Gadget "Labels" auswählen, die Wahl bestätigen und die Layout-Änderung durch drücken von "Speichern" aktivieren.

Nun geht es darum, die Code-Änderungen für die Tag-Cloud per Hand vorzunehmen: Wir gehen in der Blog-Administration auf dem Reiter "Layout" und wählen diesmal den Menüpunkt "HTML bearbeiten". Im Quelltext suchen wir die Zeichenfolge "]]</b:skin>" und fügen davor folgenden Code ein:


/* 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}


Unmittelbar nach den Zeichen "]]</b:skin>" und vor "</head>" muss der Code für ein kleines JavaScript, das die Formatierung der Tag Cloud übernimmt, eingefügt werden:

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

Im Quelltext müsste noch folgende Zeile zu finden sein:

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

Diese ersetzen wir durch ein längeres Stück Code:

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

Jetzt einmal kurz durchatmen und auf den Knopf "Vorschau" drücken. Hat alles geklappt? Prima!

Die Tag-Cloud lässt sich noch über die Angaben über die "Label Cloud User Variables" anpassen. Den Code dazu haben wir einen Schritt vorher eingefügt. Die Variablen sind zwar selbsterklärend, doch hier noch einmal die Beschreibung, um eventuellen Mißverständnissen vorzubeugen:

cloudMin -> Anzahl, ab der ein Schlagwort in der Wolke angezeigt werden soll
maxFontSize -> Größe für das meist verwendete Schlagwort
var maxColor -> Farbe als RGB-Wert, in der das meist verwendete Schlagwort dargestellt werden soll
minFontSize -> Größe für das meist Schlagwort mit minimaler Nennung
minColor -> Farbe als RGB-Wert für das meist Schlagwort mit minimaler Nennung
lcShowCount -> Anzeigen, wie oft das Schlagwort verwendet wurde (Werte "true" oder "false")

Viel Freude und Erfolg mit der Tag-Cloud!