Ab heute werden externe Links bei mir mit einem extra Icon gekennzeichnet. Das erleichtert die Entscheidung den Link in einem neuen Fenster oder nicht zu öffnen ;). Außerdem weiß man so vorher schon wann man die Seite verlässt und wann nur auf eine interne Seite verwiesen wird.
Das ganze funktioniert sehr ressourcensparend mit einem CSS 3 Selektor. Die Idee dazu habe ich von den Webkrauts übernommen. Für meinen Blog aber etwas angepasst, so dass nur Links innerhalb der Posts mit dem Icon versehen werden und keine Links in der rechten Navigation. Dort sah das nicht gut aus :). Außerdem habe ich https:// URLs hinzugefügt, die wurden vorher nicht erkannt.
Der CSS-Code dafür lautet:
.chapter a[href^='http://'], .chapter a[href^='https://'] { padding-right: 15px; background: url(images/link_extern.gif) right no-repeat; } .chapter a[href^='http://www.tobiaskoelligan.de'], .chapter a[href^='http://tobiaskoelligan.de'] { padding-right: 0; background: none; }
Damit werden zuerst alle Links die mit http:// oder https:// anfangen und innerhalb eines Elements mit der Class chapter sind, mit einem Icon am Ende des Links versehen. Dazu wird einfach durch padding-right etwas Platz geschaffen, welcher dann mit dem Hintergrundbild, welches rechts positioniert ist, wieder aufgefüllt wird. So hat man schon mal alle Links markiert, man möchte jetzt aber nur die externen am Ende wirklich markiert haben, daher setzen wir die Einstellung für Links auf die eigene Seite wieder entsprechend zurück, dies geschieht im zweiten CSS Block. Natürlich ebenfalls nur für die Klasse chapter.
Eigentlich sehr leicht, und auch für alle aktuellen Browser erkennbar. Lediglich der IE<7 tut sich noch etwas schwer damit und führt den Code nicht aus, so entsteht aber auch kein direkter Nachteil.
Zusatz:
Möchte man zum Beispiel Links auf PDF Dateien besonders kennzeichnen, kann man dies leicht ebenfalls mit CSS 3 erledigen:
/* Schreibt hinter jedem PDF 'PDF' */ a[href$=".pdf"]:after { font-size: 10px; color: blue; content: " [PDF]"; }
Danke an Stefan für den Tipp.
Nachtrag:
Wer das Sociable-PlugIn nutzt kann mit:
.chapter a[href^='http://www.tobiaskoelligan.de'], .chapter a[href^='http://tobiaskoelligan.de'], .sociable a[href^='http://'], .sociable a[href^='https://'] { padding-right: 0; background: none; }
anstatt des zweiten Teils des oberen Blocks, das Verändern der Links dort verhindern.
Kathi
28. Dezember 2008 at 17:35
Dafür gibts übrigens auch ein nettes Plugin -> Link Indication, der erkennt externe Links gleich automatisch und man kann bestimmten URLs ein eigenes Icon zuweisen, wie z.B. Wikipedia. Ist ne nette Spielerei und nützlich finde ich, macht aber vom Quellcode her denk ich genau das gleiche!
admin
28. Dezember 2008 at 17:39
Jop, habe ich bei dir gesehen, bzw danach gegoogelt ;)
Aber ich dachte mir, nen extra PlugIn macht Wordpress nur “schwerer”, daher hab ichs selber in die CSS Datei eingetragen :). Leichter ist natürlich das PlugIn :).
Stefan
30. Januar 2009 at 12:55
Danke für den Artikel. Eine kleine Erweiterung habe ich noch:
/* Schreibt hinter jedem PDF 'PDF' */
a[href$=".pdf"]:after {
font-size: 10px;
color: red;
content: " [PDF]";
}
Das ist ganz nett, wenn man angezeigt bekommen möchte, dass ein Link ein PDF statt einer Seite öffnet.
:-)
admin
30. Januar 2009 at 13:53
Das ist eine gute Erweiterung, danke, nehme ich heute Abend mit in den Artikel auf.
Thomas, paderSolutions.de
23. Februar 2009 at 20:07
Ich bin mit “Link Indication” recht zufrieden =)
Aber eine eigene Umsetzung hat natürlich auch immer ihren Reiz ;-)