fk:Blog – Fabians Weblog

Mit CSS Externe Links kennzeichnen – CSS-Tutorial

Mit Hilfe von CSS lassen sich so einige dinge gestallten.
Aber auch Sinnvolle Funktionen bietet CSS2.1, z.b das kennzeichnen Externer Links.

Hierzu bietet CSS eine zusätzliche Syntax zu Verweisen an.
Die wohl bekanntesten Pseudoelementen werden im CSS-Attribut “a” verwendet, um Verweise (Links) diverse Eigenschaften wie “Hover-Effekt” anzueignen.

Für das Verweis Attribut “a” gibt es aber auch eine Syntax mit dessen Hilfe man bestimmte Verweise anders behandeln kann als die Üblichen.

Auf fkblog.de Verwende ich diese Methode um einige Externe Links von Internen Links zu unterscheiden.
Michael Wöhrer, von SW-Guide biete für WordPress ein Plugin an, um Externe Links zu kennzeichnen und inviduelle Icons für bestimmte Links zu setzen.

Sicherlich eine bequeme Lösung, aber jedes zusätzlich verwendete Plugin bedeutet auch mehr Perfomance verbrauch und bei einen Update von WordPress ob das Plugin überhaupt noch funktioniert.

Die CSS Variante dagegen, läuft mit jeder WordPress Version, da sie Software unhabhängig ist.
Und die CSS-Datei wird immer geladen beim Aufruf der Webseite.

Nun zum Exemple
Öffnet eure Stylesheet Datei (in den meisten fällen die style.css) und sucht den Abschnitt der eure Links formatiert. Dieser könnte z.B. so aussehen:

a, a:visited {color: #ccc; text-decoration: none;}
a:hover, a:active {color: #000; text-decoration: underline;}

Dies ist eine in wahrscheinlich jeder style.css gleich bleibende Prozedur, ledentlich die Ausgabe Werte sind vom Beispiel abweichend.

Um nun mittels CSS externe Link zu kennzeichnen, braucht es nicht viel, statt “a” fügen wir einfach eine weitere Hyperlink Formatierung in unsere CSS, jedoch mit folgenden zusatz: [href^="https://www.my-domain.com"].

Um also z .B. fkBlog.de in eurem Blog als Externen Link zu Kennzeichnen fügen wir einfach folgenden CSS-Schnipsel ein:

a[href^="http//www.fkblog.de/"]
{
padding-left: 12px;
background-image: url('your_image.gif');
background-repeat: no-repeat;
background-position: 0 0.45em;
}

Eigentlich reich das schon, alle Links die ihr auf fkBlog.de macht, werden Automatisch mit einen kleinen Icon gekennzeichnet. Ihr könnt den CSS Code aber auch anpassen und die Links je nach Seite anders färben, alles kein problem mit dem CSS Zusatz.

Ich habe euch mal ein kleines icon-Set zusammen gestellt, dies könnt ihr hier Downloaden:
Download: Icon Set (1013)

Für anregung, Fragen oder Hinweise in die Kommentarfunktion stellen.