Wolf's IT-Blog: Simple Tag-Cloud für Blogger bzw. WordPress

Tag-Clouds geben knapp und intuitiv die Relevanz von Informationen in einer visuellen Übersicht aus. Also die Schlagworte (Tags) hier im Blog werden zum Beispiel gezählt und man kann jetzt entweder auf die herkömmliche Art eine Statistik über die Häufigkeit ausgeben oder sie durch unterschiedliche Buchstaben-Größen anzeigen. Das dabei erzeugte Text-Bild ist Namensstifter für die Wolke.

WordPress bzw. Blogger liefert die Anzahl, so dass eigentlich nur die Aufbereitung mit unterschiedlichen Buchstabengrößen zu tun ist. Ich habe nicht so viele Tags, so dass mein Algorithmus schlicht ist: Ausgangsgröße der Fonts = 10px und jeder Treffer wird einfach darauf addiert, also 5 Treffer = 15px! Wenn man mehr Treffen hat, dann muss man halt die Trefferzahl geeignet teilen oder so, bevor man sie addiert (ich überlasse das mal der Fantasie jedes einzelnen, damit zurecht zu kommen).

Wie wird nun die Addition auf die Font-Größe vorgenommen? Mit einem 2-Zeiler in JavaScript. Wer das nachbauen will, muss beim Blogger ins Menü 'Layout->HTML bearbeiten' und dann Haken rein in 'Vorlagen zum Erweitern von Widgets'! Am Besten mit der Browser-Suche das Stichwort 'Tags' suchen. Der folgende Code-Abschnitt enthält alle Informationen:

<b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
    <!--<ul>-->
  <b:loop values='data:labels' var='label'>
      <!--<li>-->
      <b:if cond='data:blog.url == data:label.url'>
        <span expr:dir='data:blog.languageDirection'>
          <data:label.name/>
        </span>
      <b:else/>
        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
           <span expr:style='&quot;font-size:&quot; + data:label.count +
            &quot;px;font-size:expression(eval(10+&quot; + 
            data:label.count + &quot;))&quot;' name='tagcloud'>
               <data:label.name/>
           </span>
        </a>
      </b:if>
        <!--<span dir='ltr'>(<data:label.count/>)</span>-->
      <!--</li>-->
  </b:loop>
    <!--</ul>-->
    <script>var taglist=document.getElementsByName(&quot;tagcloud&quot;);
            for (var i=0; i &lt; taglist.length; ++i) { s = taglist[i].style; 
              s.fontSize = (parseInt(s.fontSize)+10)+&#39;px&#39;; }
  </script>
  <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>