Externe Links per CSS mit Grafiken kennzeichnen
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
.entry a[href^="http://"],
.entry a[href^="https://"]
{background:transparent url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_external.gif") no-repeat right;padding-right:12px}
.entry a[href^="http://www.wiki"],
.entry a[href^="http://wiki"]
{background: url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_wikipedia.gif") no-repeat right; padding-right: 17px!important}
.entry a[href^="http://www.wordpress"],
.entry a[href^="http://wordpress"]
{background: url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_wordpress.png") no-repeat right; padding-right: 17px!important}
.entry a[href^="http://www.deine-blogadresse.de"],
.entry a[href^="https://www.deine-blogadresse.de"],
.entry a[href^="https://deine-blogadresse.de"],
.entry a[href^="http://deine-blogadresse.de"]
{padding-right:0;margin-right:0;background:transparent}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:
.commentmet_text a[href^="http://"],
.commentmet_text a[href^="https://"] {
background:transparent url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_external.gif") no-repeat right;padding-right:12px}
.commentmet_text a[href^="http://www.wiki"],
.commentmet_text a[href^="http://wiki"] {
background: url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_wikipedia.gif") no-repeat right; padding-right: 17px!important}
.commentmet_text a[href^="http://www.wordpress"],
.commentmet_text a[href^="http://wordpress"] {
background: transparent url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_wordpress.png") no-repeat right; padding-right: 17px!important}
.commentmet_text a[href^="http://www.deine-blogadresse.de"],
.commentmet_text a[href^="https://www.deine-blogadresse.de"],
.commentmet_text a[href^="https://deine-blogadresse.de"],
.commentmet_text a[href^="http://deine-blogadresse.de"]
{padding-right: 0;background: transparent}CSS-Attribute auf Seiten
Das 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:
.post-page .entry a[href^="http://"],
.post-page .entry a[href^="https://"] {
background:transparent url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_external.gif") no-repeat right;padding-right:12px}
.post-page .entry a[href^="http://www.deine-blogadresse.de"],
.post-page .entry a[href^="https://www.deine-blogadresse.de"],
.post-page .entry a[href^="https://deine-blogadresse.de"],
.post-page .entry a[href^="http://deine-blogadresse.de"]
{padding-right: 0;background: transparent}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.
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
Hej hansen,
oh dann kann ich ja froh sein, dass Du trotzdem eine fleißige Besucherin dieses Blogs bist. ;-)
Danke für Dein nettes Feedback.
Lieben Gruß,
Sylvi
Hallo Sylvi,
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
Hej hansen,
ah okay, wie zwei kleine Wörtchen den Sinn verfälschen können, gell? :mrgreen:
Lieben Gruß
Sylvi
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. :oops:
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:
.sinsocialshare a[href^="http://www.twitter.com/themenfreund"], .sinsocialshare a[href^="https://www.twitter.com/themenfreund"], .sinsocialshare a[href^="https://twitter.com/themenfreund"], .sinsocialshare a[href^="http://twitter.com/themenfreund"] {padding-right: 0;background: transparent}.
Eventuell reicht ja auch schon
.sinsocialshare a[href^="http://www.twitter.com/themenfreund"] {padding-right: 0;background: transparent}bzw.
.sinsocialshare a[href^="http://de.linkedin.com/in/marcuss28"] {padding-right: 0;background: transparent}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 :)
Toller Tipp Cujo,
Links lasse ich eh bereits in Tabs statt im neuen Fenster öffnen. Das Öffnen im Hintergrund mittels Scrollrad ist natürlich eine tolle Idee.
Gruß Sylvi
Sobald ich wieder Zeit habe setzte ich das mal um. Ob mit Plugin oder per dem Code weis ich noch nicht aber in der erste Theme von mir hatte ich das auch drin. Danke für den Tip.
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:
#content p a[href^="http://"], #content p a[href^="https://"] { background:transparent url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_external.gif") no-repeat right;padding-right:12px} #content p a[href^="http://www.wiki"], #content p a[href^="http://wiki"] { background: url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_wikipedia.gif") no-repeat right; padding-right: 17px!important} #content p a[href^="http://www.wordpress"], #content p a[href^="http://wordpress"] { background: url("http://www.dein-pfad-zur-grafik.de/li_images/link-icon_wordpress.png") no-repeat right; padding-right: 17px!important} #content p a[href^="http://www.deine-blogadresse.de"], #content p a[href^="https://www.deine-blogadresse.de"], #content p a[href^="https://deine-blogadresse.de"], #content p a[href^="http://deine-blogadresse.de"] {padding-right:0;margin-right:0;background:transparent}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.
Hallo Safferthal,
das ist ja wirklich merkwürdig. Verwendest Du ein Plugin oder eine manuelle Umsetzung?
Gruß Sylvi
Ein neu installiertes PlugIn war schuld daran. Aber es gab schon eine neue Version vom PlugIn. Funktioniert also alles wieder 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
Wusste gar nicht, dass das blank Attribut ein No Go für Blogger ist. Mich würde mal interessieren warum das so ist? Weißt du das?
@Sebastian, weil es einige nicht mögen, wenn auf Klick eines Links mehrere Tabs (oder je nach Einstellung auch Fenster) geöffnet werden, die sie dann alle wieder schließen müssen.
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 :-)
So, und wer es noch brauchen kann, hier der Code für diverse Linkkategorien:
https://pastebin.com/aLqhndVm
ergibt:
Ich finde die FontAwesome-Icons schick dazu. Und ihr?
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.
Ich glaube, ich begebe mich demnächst mal auf die Suche nach schickeren Icons. :-)
:-) Sind ganz easy einzubauen … kann man auch in Buttons etc. gut gebrachen.
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
Hej Mathias,
ganz lieben Dank für Dein nettes Feedback. Ich hoffe, der Beitrag hilft Dir ein Stück weiter dabei.
Gruß Sylvi
Ja super Hilft aber ich bekomme die Linkmakierung im den Sociallinks unten im Footer leider nicht raus!
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:
.post-entry a[href^="http://"],.post-entry a[href^="https://"] {background:transparent url("http://www.pfad-zur-link-grafik/link-icon_external.gif/link-icon_external.gif") no-repeat right;padding-right:15px}oder ggf.
.post-entry p a[href^="http://"],.post-entry p a[href^="https://"] {background:transparent url("http://www.pfad-zur-link-grafik/link-icon_external.gif/link-icon_external.gif") no-repeat right;padding-right:15px}Und für interne Links dann
.post-entry a[href^="http://www.deine-blogadresse.de"], .post-entry a[href^="https://www.deine-blogadresse.de"], .post-entry a[href^="https://deine-blogadresse.de"], .post-entry a[href^="http://deine-blogadresse.de"] {padding-right:0;margin-right:0;background:transparent}oder eben mit
.post-entry p avorangestellt.Gruß Sylvi