Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Icon hinter externen Links einfügen

Icon hinter externen Links

Links erkennbar gestalten

Früher waren die Links auf einem Blog oder einer Website klar markiert. Sie hatten alle dieses kräftige Blau, sie waren unterstrichen und sie waren immer und überall sofort erkennbar. Inzwischen hat sich das allerdings geändert. Links sind zwar immer noch farblich markiert, heben sich aber längst nicht mehr so stark vom restlichen Text ab und stechen schon gar nicht hervor. Dabei ist es doch eigentlich so einfach, zumindest externe Links mit einem Icon zu markieren, um seinen Lesern mitzuteilen, dass sich beim Klick ein neues Fenster öffnet. Ungemein wichtig, wie ich finde, weil Leser so direkt wissen ob ein Link nur zu einer anderen Unterseite, oder zu einer externen Website führt. Das Icon ist Standard, wird von allen großen Magazinen und Portalen genutzt, nur Blogger vergessen diesen kleinen Hinweis auf ihren Seiten oft. Dabei gibt es dafür gar keinen Grund, denn mit CSS ist das alles sehr schnell gemacht.

Folgendes in eure CSS-Datei einfügen:

a[target="_blank"]:after{content:"";background:url("data:image/png;base64,R0lGODdhCgAKAIAAAGhoaP///ywAAAAACgAKAAACFIwPCcfq5hZKgUJbZ2OwcyltVWQVADs=") no-repeat scroll 100% 40%;margin-right:5px;padding-right:15px}

Links mit CSS markieren

Mit den Attributen innerhalb der CSS lässt sich der externe Link, im Gegensatz zu den normalen Links, aufwändiger gestalten. In diesem Falle wird via CSS ein Base64 Icon hinzugefügt, die wohl beste und einfachste Methode externe Links zu markieren. Falls ihr FontAwesome verwendet, könnt ihr natürlich auch ein Icon der Font verwenden und es dann über “content” integrieren. Übrigens: Ihr könnt mittels CSS auch Links zu ganz bestimmten URL’s frei gestalten. So könnt ihr, wenn ihr wollt, beispielsweise hinter allen Links zu Amazon ein eigenes Icon anzeigen lassen. Wie das geht, hatte ich euch schon vor längerem mal in einem Artikel gezeigt. Also worauf wartet ihr noch, markiert eure Links, denn das hilft euren Lesern und damit am Ende auch euch.



Wordpress Performance eBook