Externe Links per CSS mit Grafiken kennzeichnen

Geschätzte Lesezeit: 2 Minuten

Für viele Blogger ist es ein absolutes No-Go, externe Links mit dem target=“_blank“-Attribut zu versehen. target=“_blank“ bedeutet, dass sich bei Klick auf solch einen Link ein Extra-Tab im Browser öffnet. Die ursprünglich besuchte Seite bleibt dabei geöffnet. Fehlt diese Einstellung, so gelangt man mit Klick direkt auf den verlinkten Beitrag bzw. die Seite. Die daraufhin geöffnete Seite „überlagert“ also die vorher besuchte Webseite.

Ich persönlich bin genervt, wenn ich immer wieder zurückklicken muss, um zum ursprünglich gelesenen Artikel zu gelangen. Aber da streiten sich eben immer noch die Geister und vermutlich ist es unmöglich, bei diesem Thema einen Konsens zu erzielen.

Gut, also ich gehöre zu den verpönten Bloggern, die dieses Attribut verwenden. 🙂 Aber woher sollen das Besucher – insbesondere neue – erkennen? Auf fremden Webseiten öffne ich einen Link vorsichtshalber schon einmal über das Kontextmenü per Rechtsklick – wenn ich daran denke. Weil ich eben nicht weiß, ob der Beitrag überlagert oder über einen neuen Tab geöffnet wird.

Umsetzung per Plugin

Um derartige Links zu kennzeichnen, ist das WordPress-Plugin Link Indication wunderbar geeignet und ich habe es auch eine Weile verwendet.

Umsetzung per CSS

Es gibt aber auch die Möglichkeit, derartige Links per CSS manuell zu kennzeichnen und so bin ich auf der Suche nach einer Lösung natürlich wieder fündig geworden. 🙂

In diesem Beitrag wird auf im-Tal.net ausführlich diese Umsetzung dokumentiert und auch wenn der Beitrag nicht mehr ganz neu ist, funktioniert die Beschreibung in meinem Theme immer noch wunderbar, wie ihr ja bereits beim Lesen dieses Beitrages sehen könnt.

Umsetzung hier im Blog

Eingefügt habe ich es in der CSS-Datei „style.css“ des Themes Smoky. Am Besten ihr untersucht per Firebug, wie die Formatierung in Eurem Theme für Beiträge umgesetzt wurde.

CSS-Attribute für Artikel

Natürlich bleibt es Euch überlassen, ob ihr noch zusätzliche Grafiken z. B. für Facebook, Twitter und so weiter verwenden möchtet.

CSS-Attribute in Kommentaren

Um den gleichen Effekt bei Links in Kommentaren zu erzielen, habe ich auch hierfür die Werte verwendet:

CSS-Attribute auf Seiten

Blogroll-SeiteDas Ganze funktioniert natürlich auch bei Links auf Seiten. Allerdings habe ich nach kurzem Test diese Werte wieder herausgenommen, weil meine Blogroll-Seite dann doch zu sehr mit den Link-Grafiken überfrachtet war.

Hier trotzdem noch einmal die Werte für Seiten in meinem Theme:

Eine Kleinigkeit musste ich noch hinzufügen, weil ich interne Anker-Verlinkungen ebenfalls mit einer Grafik kennzeichne. Diese erschien aufgrund der oben beschriebenen Werte plötzlich nicht mehr.
Hier ein Beitragsbeispiel – im 4. Abschnitt habe ich diese Art der Verlinkung angewandt. Ich habe dessen CSS-Werte noch um !important ergänzt, damit diese vorrangig zu den oben angewandten Verlinkungsformatierungen angewandt werden.

Vielleicht ist diese Art der Umsetzung ja auch für den einen oder anderen von Euch interessant.

Hinweis
Dieser Beitrag bezieht sich auf Codierungen oder/und Funktionen, die ich noch in meinem alten Template umgesetzt habe. Es ist möglich, dass sie in dem aktuellen Blog-Theme nicht übernommen wurden und somit die Darstellung bzw. Funktion nicht mehr existiert.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen, sei es über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

36 Kommentare

Kommentare hinzufügen
  • Hallo Sylvi,

    ich hasse auch dieses target=”_blank”-Attribut, aber es ist halt derzeit nach W3C nicht valide.
    Es gibt aber Überlegungen, das target=”_blank”-Attribut bei HTML5 als validen Standard einzuführen.
    Deine CSS-Lösung gefällt mir.

    Liebe Grüße
    hansen

      • Hallo Sylvi,

        oh dann kann ich ja froh sein, dass Du trotzdem eine fleißige Besucherin dieses Blogs bist.

        musste erst mal überlegen, was Du damit meinst.
        Dann sah ich, dass ich beim Ändern meines Kommentars zu viel gelöscht habe.
        Der Satz sollte lauten:
        Ich hasse auch das Setzen dieses target=”_blank”-Attributs, aber es ist halt derzeit nach W3C nicht valide.
        Und ich lese gerne Deinen Blog.

        Liebe Grüße
        hansen

  • Hallo Sylvi,

    tolle Lösung, vor allem weil ich ja auch so ein Fan von „do-it-yourself“-Lösungen bin. 😉

    Mir war gar nicht bewusst, dass für viele Blogger der Einsatz von target=“_blank“ ein No-Go ist. Ich verwende es jedenfalls in meinem Blog.

    Genauso wie du bin ich nämlich auch genervt, wenn das bei anderen nicht der Fall ist. Deshalb drücke ich schon immer automatisch STRG bevor ich auf einen Link klicke (der kurze Weg, wenn du nicht extra Rechtklick und über Kontextmenü gehen willst – jedenfalls bei Firefox).

    Wenn ich einen Artikel lese und weiterführende Links im Artikel anklicke, dann möchte ich die verlinkten Webseiten meistens erst nach dem Lesen des eigentlichen Artikels anschauen. Aus diesem Grund will ich die halt stets in einem separaten Tab geöffnet haben.

    Beste Grüße

    Stephan

    • Hallo Stephan,

      da freue ich mich, dass sie Dir gefällt. Ja, Du dokumentierst auch sehr viele manuelle Umsetzungen in Deinem Blog und ich spicke dort immer wieder gerne. 🙂

      Naja, da gibt es schon teilweise recht extreme Sichtweisen im Netz hinsichtlich der target=“_blank“-Links. Aber es beruhigt mich, dass Du es genauso siehst wie ich.

      Übrigens danke für den Tipp mit STRG, den kannte ich tatsächlich noch nicht. 😳

      Lieben Gruß
      Sylvi

  • Mal wieder ein netter Tipp, ein Plugin einzusparen!

    Gerade mal umgesetzt.

    Nur ein Problem habe ich: Jetzt werden auch im SiN-SocialShare-Plugin die Grafiken für die Externen Links angezeigt. Weiß wer, wie ich die da raushalten kann?

    • Hallo Marcus,

      schön, wenn es auch bei Dir funktioniert. Stimmt, ist nicht so schön bei den Socialshare-Buttons. Vielleicht klappt es ja, wenn Du in die CSS-Datei Deines Themes folgende Werte einträgst:

      .

      Eventuell reicht ja auch schon

      bzw.

      ggf. noch mit dem Attribut „!important“.

      Gruß Sylvi

  • Ich habe in Firefox in den Tabs-Einstellungen die Option „Statt neuem Fenster neue Tabs öffnen“ angewählt. Dadurch ist es mir egal, ob „target_blank“ gesetzt ist oder nicht. Ich klicke einfach jeden Link, der mich interessiert, mit der mittleren Maustaste (dem Scrollrad) an. Dadurch wird dann ein Tab im Hintergrund geöffnet. Die Hintergrund-Tabs lese ich dann, wenn ich mit dem Vordergrund-Tab fertig bin. Ist für mich die einfachste Methode 🙂

    • Hallo Daniel,

      die Plugin-Lösung Link-Indication hat bei mir (obwohl sie schon länger nicht mehr gepflegt wird) bis vor Kurzem noch funktioniert. Vielleicht existiert ja noch ein alternatives Plugin. Würde mich interessieren, welche Variante – ob Plugin oder manuelle Umsetzung – Du letztendlich gewählt hast.

      Gruß Sylvi

  • Noch einmal an Marcus,

    kann es sein, dass Du die Attribute für die komplette Webseite – ohne CSS-ID oder Class für Deine Beiträge umgesetzt hast?

    Ich frage nur deswegen, weil auch an den Grafiken im Footer die Linkgrafiken erscheinen und mir daraufhin Deinen Blog mit Page Speed angeschaut habe.

    Ich könnte noch folgende Beispiel-Lösung für Deinen Blog anbieten:

    Dann müssten die Grafiken nur in den Beiträgen erscheinen.

    Gruß Sylvi

  • Das Plugin Link Indication funktioniert noch immer. Habe es mal eben getestet und sieht gut aus. Besser ist es in der Theme da spart man sich ein Plugin. Mal gugen ob und wann ich es einbaue. Sieht auf jedenfall gut aus und ein Mehrwert für den Besucher!

  • Für mich ist es eher ein absolutes Nicht-Gehen, wenn externe Links sich nicht in einem neuen Fenster öffnen. Seit ein paar Tagen öffnen sich alle externen Links, die über eine Grafik gehen, nicht mehr in einem neuen Fenster. Obwohl _blank gesetzt ist. Nur noch Links ohne Grafik funktionieren einwandfrei.

  • Bei mir kommt es immer ganz darauf an, ob ich auf einer Seite weiterlesen will, oder ob ich sowieso auf die nächste Seite wechseln will. Von daher entscheide ich es eigentlich gerne selbst. Das vorgestellt Plugin gefällt mir aber trotzdem, weil sich die Links so deutlich haben, dass ein Leser sie nicht übersehen kann. Aber ich war der Meinung, dass eine Seite abgewertet wird, wenn man das Öffnen auf einer neuen Seite aktiviert? Oder ist das inzwischen veraltet?

    • „Aber ich war der Meinung, dass eine Seite abgewertet wird, wenn man das Öffnen auf einer neuen Seite aktiviert?“

      Hat das Googles M.C. gesagt oder irgendein Möchte-Gern-Seo? Das meiste im Bereich SEO ist Halbwissen und die meisten sind Dummschwätzer … evtl. sogar mit Absicht um die anderen Webmaster auf den Holzweg zu bringen.

      • Hej Safferthal,

        ist mir nicht bekannt, dass eine Seite durch das Attribut target=“_blank“ abgewertet werden könnte, nur dass es nicht valide ist. Okay, meines Wissen wird eine äußerst invalide Seite wohl letztendlich nicht sehr gut von Google bewertet.
        Ich gehe mal von Deiner 2. These (Möchte-Gern-SEO) aus, weil ich hier schon seit Beginn des Blogs dieses Attribut verwende und keine Abwertung feststellen konnte. 😉

        Gruß Sylvi

  • Ich bin auch immer genervt vom ständigen zurückklicken! Das blöde dabei ist, dass die Seite meist neu geladen wird und man wieder ganz oben auf der Seite landet, obwohl der Link weiter unten war und man dort weiterlesen möchte! Ich mache das mittlerweile so, das ich auf jeden Link mit der rechten Maustaste klicke und „in neuem Tab öffnen“ auswähle!

    Dabei fällt mir gerade auf, dass ich alle Links von allen Webseiten die ich bis jetzt programmiert habe, OHNE target blank versehen habe, obwohl ich es selber lieber mit hätte…hab mir beim programmieren gar keine Gedanken drüber gemacht

    • Hallo Fabian,

      an meinem Blog spiegelt sich schon wider, wie ich es gerne auf anderen Seiten vorfinden würde – womit ich keinesfalls behaupten möchte, dass er perfekt ist. Ich bin ja nicht nur Webmaster sondern letztendlich ebenfalls Besucher. 🙂
      Aber mir gefallen auch Blogs, die anders strukturiert sind. Diese motivieren mich dann dazu, am Ball zu bleiben und immer mal wieder Veränderungen vorzunehmen.

      Nach Deiner Erkenntnis, dass Du Deine programmierten Seiten nicht mit target=“_blank“ versehen hast, wirst Du das jetzt in Zukunft ändern?

      Gruß Sylvi

  • Danke, Sylvi, für den Tipp. Das hat mich auf die Idee gebracht (da mein Theme ohnehin FontAwesome verwendet – kann man ja auch nachträglich nachrüsten), statt der eingebundenen Grafiken Icons von FontAwesome einzubinden, z.B. das hier, die Auswahl ist ja riesig.

    Rausgekommen ist dann dein Code in abgewandelter Form:
    http://pastebin.com/0n8RndRZ

    und das sieht im Frontend so aus (mein Blog ist noch in Arbeit ;-):

    Hach, ich liebe deine Basteleien, danke Sylvi 🙂

  • Hallo Birgit,

    das ist ja superpraktisch und die kleine Icons gefallen mir richtig gut. ich weiß gar nicht so genau, wo ich meine Grafiken gefunden habe, aber ich musste sie mir eben zusammensuchen. 😉

    Lieben Gruß
    Sylvi

  • Ich hatte früher mal auf einem anderen Blog das LinkIndication Plugin gehabt – aber die Icons sind dort, ähm, eher „altbacken“ 😉
    Aber mit den eingebundenen FontAwesome-Icons spart man sich das „Bildmaterial“ und kann ruckzuck für verschiedene Zwecke die Icons hernehmen.

  • Hallo Sylvi sehr schöner Beitrag echt, gut beschrieben. Arbeiten an einen Projekt WordPress ohne Plugins nutzen, da kommt das ganze wie gerufen 🙂

    Online Blogger der Technik Blog

  • Habe es anders gelöst code sieht wie folgt aus
    /* Alle Links kennzeichnen (intern + extern) */ #content a[href^="http://"], #content a[href^="https://"] {    background:transparent url(../images/link_externer.png) center right no-repeat;    display:inline-block;    padding-right:15px;   }/* Alle internen Links nachbearbeiten */  #content a[href^="http://www.meinedomain.de"],  #content a[href^="https://www.meinedomain.de"],  #content a[href^="https://meinedomain.de"],  #content a[href^="http://meinedomain.de"]  {    padding-right: 0;    background: transparent;  }

    • Okay … viele Wege führen nach Rom. 🙂 Ich hätte es in Deinem Fall für die Anzeige in Beiträgen so umgesetzt:

      oder ggf.

      Und für interne Links dann

      oder eben mit .post-entry p a vorangestellt.

      Gruß Sylvi

Schreibe einen Kommentar

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

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Copyright © Sylvis Blog • 2019. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung

%d Bloggern gefällt das: