Ihr habt sicher schon öfters gesehen, dass bei anderen Webseiten hin und wieder ein Symbol neben einem Link auftaucht, der dem Leser anzeigt, dass es hier weiter geht. Vorallem Typo 3 Webseiten haben diese Funktion gerne drinn. Oft sieht man da dann dieses Symbol:
link-out

Nun möchte ich euch kurz zeigen, wie man sowas auch hier im Blog machen kann. Ich benütze dazu die Dashincons da ich diese ja auch hier schon vorgestellt habe – man kann aber auch FontAwesome nehmen.

Dann fügt man den folgenden Code im CSS ein.

1
2
3
4
a[href^="http://"]:
not([href*="chefblogger.me"]):after,a[href^="https://"]:
not([href*="chefblogger.me"]):after{font-family:dashicons;
font-size:10px;content:"f504"}

Jetzt wird jedesmal wenn ein Link „a href“ aufgerufen wird, geprüft wohin der Link führt, wenn er nicht mit der chefblogger.me URL übereinstimmt, wird das Symbol 10px gross neben dem Link angezeigt.

Man kann das Ganze natürlich jetzt auch noch erweitern, in dem man noch prüft ob es ein pdf ist oder ein andere Webseite und so jedesmal ein einanderes Symbol anzeigen lassen. Der Fantasie sind hier keine Grenzen gesetzt.

Viel Spass beim Aufpimpen eurer Links.

Über

Eric-Oliver Mächler

Seit 2005 bin ich ein aktiver Blogger. Ich kenne die Kniffe und die Tricks um einen Blog erfolgreich zu machen. Hier gebe ich diese kleinen Tricks gerne weiter und freue mich, wenn ich euch helfen kann. Hier erfährt man mehr über mich.

Hinterlass einen Kommentar