Zum Hauptinhalt springen
Blog & News

Aktuelles & Updates von
Joomla, Wordpress und Co.

News, HowTos und Tutorials rund um Webdesign, Webentwicklung, Webhosting und Digitalisierung.

Blog & News

Externe Links automatisch kennzeichnen

06.05.2020 · 1 Min Lesezeit

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/

Zurück zur Übersicht