Joomla und Wordpress FAQ, HowTo & Tutorials

Externe Links markieren ist nicht nur ein Pluspunkt an Usability sondern hät Besucher auch länger auf der Seite. Automatisch eine Markierung an alle Externen Links einfügen ist schnell gemacht.

Folgender JavaSkript Code muss in den Header der Seite. (Unterhalb der jQuery einbinung)

JS CODE:

jQuery('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).addClass("external");

An eine beliebige Stelle der CSS-Datei dann die entsprechende CSS-Klasse für die Gestaltung.
Das icon das geladen wird stammt aus FontAwesome . Um es zu verändern, einfach ein Icon aussuchen und den Unicode "f08e" kopieren

CSS CODE:

.external:after {
   color: #1e4678;
   padding-left: 10px;
   font: normal normal normal 14px/1 FontAwesome;
   content: "\f08e";
}

Weitere Lösungen

https://css-tricks.com/snippets/jquery/target-only-external-links/