Start Blog Tutorial CSS Tagcloud (Schlagwortwolke)

CSS Tagcloud (Schlagwortwolke)

TagcloudPassend zum Tutorial − PHP und MySQL Tagcloud (Schlagwortwolke) − zeigt dieser Artikel, wie die erstellte Tagcloud in CSS gestaltet werden kann. Durch die Benutzung von Style-Klassen können die Schlagwörter nun nicht nur durch ihre Schriftgröße unterschieden werden, sondern auch durch Schriftfarbe, Schriftart, Hintergrundfarbe etc.

Dieser Artikel baut auf dem Tutorial PHP und MySQL Tagcloud (Schlagwortwolke) auf.

XHTML Markup

Die XHTML Struktur bleibt die gleiche, wie die im vorherigen Artikel. Um die Tagcloud anschaulicher zu machen, habe ich nun meine aktuellen Tags für die Tagcloud verwendet. Das PHP Script liefert dann folgendes:

<div id="tagcloud">
<a href="/tag-suche/bildwechsel" class="tag1">bildwechsel</a> 
<a href="/tag-suche/css" class="tag3">css</a> 
<a href="/tag-suche/hover" class="tag2">hover</a> 
<a href="/tag-suche/liste" class="tag1">liste</a> 
<a href="/tag-suche/mouseover" class="tag2">mouseover</a> 
<a href="/tag-suche/navigation" class="tag1">navigation</a> 
<a href="/tag-suche/newsflash" class="tag1">newsflash</a> 
<a href="/tag-suche/newsteaser" class="tag1">newsteaser</a> 
<a href="/tag-suche/ohne-javascript" class="tag2">ohne-javascript</a> 
<a href="/tag-suche/pagination" class="tag1">pagination</a> 
<a href="/tag-suche/popup-effekt" class="tag1">popup-effekt</a> 
<a href="/tag-suche/seitennummerierung" class="tag1">seitennummerierung</a> 
<a href="/tag-suche/seitenzahl" class="tag1">seitenzahl</a> 
<a href="/tag-suche/webdesign" class="tag3">webdesign</a> 
</div>

Tagcloud Beispiel 1

Für eine 3-stufige Tagcloud, also eine Tagcloud, in der drei Style-Klassen verwendet werden, kann das CSS wie folgt aussehen:

#tagcloud{ background: #303030; padding:10px 5px 10px 5px;}

.tag1{ font-size:1em; color:#555555; line-height:1em; }
.tag2{ font-size:1.2em; color:#606060; line-height:1em; }
.tag3{ font-size:1.4em; color:#808080; line-height:1em; }

#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }

Die Tagcloud sieht so aus:
Tagcloud 1

Tagcloud Beispiel 2

Eine weitere 3-stufige Lösung wäre zum Beispiel durch folgendes CSS möglich:

#tagcloud{ background:#000000; width:200px; text-align:center; }

.tag1{ font-size:0.6em; color:#505050; }
.tag2{ font-size:0.9em; color:#808080; }
.tag3{ font-size:1.5em; color:#E0E0E0; }

#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; }

Die Tagcloud sieht nun so aus:
Tagcloud 2

Tagcloud Beispiel 3

Wenn die Variable $TagSortierung = 2 gesetzt wird, werden die Tags nach ihrer Anzahl abwärts und alphabetisch sortiert. Mit dem folgenden CSS lässt sich die Tagcloud in einer etwas anderen Form gestalten:

#tagcloud{ width:180px;	padding:10px; background:#303030; }

.tag1{ font-size:0.6em; background-color:#705662; color:#fff; }
.tag2{ font-size:0.9em; background-color:#AB5471; color:#fff; }
.tag3{ font-size:1.2em; background-color:#f20161; color:#fff; }

#tagcloud a{ text-decoration:none; margin:2px; padding:2px 2px 2px 5px; display:block; }
#tagcloud a:hover{ text-decoration:none; background-color:#fff; color:#000; }

Die Tagcloud sieht dann so aus:
Tagcloud 3

Der Fantasie sind mal wieder keine Grenzen gesetzt. Viel Spaß beim Gestalten der eigenen Tagcloud!

Weitere Tutorial-Artikel

Sebastian Gollus

Ich bin seit 2007 selbständiger und freiberuflicher Web-Developer. Auch bin ich studierter Medien­wissen­schaftler mit Abschluss an der Uni Duisburg-Essen in „Angew. Kognitions- und Medien­wissen­schaften”. Neben Deutsch spreche ich auch Englisch und Niederländisch.
Kontakt zu mir gerne auch über Google+ und twitter.

Die neuesten Artikel

7 Kommentare zu “CSS Tagcloud (Schlagwortwolke)

  1. Oh super, danke! Genau danach habe ich gesucht!

  2. Schnäppchen Meister sagt:

    Klasse Sache. Hab gesucht und gesucht…

  3. azella sagt:

    Danke Dir.

    Da der Trackback nicht ging, hier nochmal:
    http://www.azella.de/blog/2011/07/tag-cloud-generator/

  4. Euro Akhbar sagt:

    grossartig was will man mehr , ich hab schon ne weile gesucht, aber jetzt endlich gefunden.

    vielen dank :)

  5. www.babykleidung.ag sagt:

    Hallo Sebastian,
    vielen lieben Dank für den Tipp und die Anleitung. Dein Ergebnis kannst du nun auf unserer Startseite sehen (http://www.babykleidung.ag) :) Klasse Idee ;)

    Grüße,
    Michael Freitag

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">