Samstag, 14. Februar 2009

Blogger-Hacks: Links mit Icons kennzeichnen

Erstmal etwas Generelles: Artikel mit der Überschrift “Blogger-Hacks” sind nicht Hacks im eigentlichen Sinne, sondern sie beschreiben Tipps und Tricks, die ich im Layout, CSS oder beim Handling im Zusammenhang mit dieser Homepage anwende.
Diesmal geht es darum, wie man Links auf bestimmte Webseiten mit einem eindeutigen Icon versehen kann, so dass der Leser schon vorher sieht, wohin ihn der Klick wohl führen könnte.
Zum Beispiel verlinke ich für Begriffserklärungen relativ oft Wikipedia in meinen Artikeln und genau das soll dem “Klicker” vorher klar sein ;-) Dafür gibt’s ab jetzt die nette Wikipedia-Weltkugel vor einem solchen Link.
Eine Weltkugel für Wikipedia!
Und wenn ihr wissen wollt, wie das (links hellrot gekennzeichnet) mit wenig Aufwand und vollautomatisiert erfolgt, dann lest weiter …


Also, wie angedeutet ist der “Trick” nicht sonderlich schwer – letztendlich geht es darum, mittels CSS ein spezielles Layout zu definieren, das genau für Wikipedia (oder eben andere Links) zur Anwendung kommt. Und das Ganze soll ohne händische Zuweisung der CSS-Klasse erfolgen.
CSS bei Blogger bedeutet, wir müssen an das HTML/CSS-Template ‘ran. Wer nicht weiß, wie das geht, kann nochmal den Tipps im ersten Drittel dieses Artikels folgen. Bitte auch den Hinweis mit dem Backup beachten – bevor (!) man etwas ändert.
Das Blogger-Template ist im Normalfall so aufgebaut, dass zu Beginn ein großer Blog mit Variablendeklarationen für Farben etc. kommt und danach beginnt eigentlich gleich der CSS-Abschnitt, in dem für einzelne HTML-Elemente das “Aussehen” festgelegt wird.
Unter anderem sollte man dort auch Deklarationen für Links finden, die innerhalb von HTML mit einen <a … gekennzeichnet werden.
In meinem Template (das zugegebenermaßen nicht ganz Blogger-Standard ist) sieht das so aus:

a { 
color: $mainLinkColor;
text-decoration:none;
}
a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}

Zuerst also die Definiton für einen Link, darunter für einen Link, der gerade mit der Maus “berührt” wird (hover). Hier passt mein Wikipedia-Hack doch gut rein:

a { 
color: $mainLinkColor;
text-decoration:none;
}
a[href *="wikipedia"] {
    padding-left: 20px;
    background: transparent url(
http://link.zum.Bild) no-repeat top left;
}

a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}

Der rote Teil ist also neu. Was aber macht er?

“a” weißt genau wie oben drüber darauf hin, dass ein Link-Element gestaltet werden soll. Der Teil in den eckigen Klammern legt fest, dass dieses Layout für einen Link nur dann zutrifft, wenn sich im href-Teil der URL-Deklaration der Begriff “wikipedia” befindet. Das ist natürlich bei allen URLs gegeben, die zur Wikipedia zeigen und stellt genau die Logik dar, die wir benötigen ;-)

Die beiden folgenden Zeilen sagen aus, dass der Link-Text 20 Pixel nach rechts versetzt wird (um Platz für das Icon zu schaffen) und dass der Hintergrund (das Icon als Bild) definiert wird, der sich nicht wiederholt (no-repeat) und oben links (top left) eingeblendet wird.

Der “Link.zum.Bild” muss natürlich zu einem Bild zeigen, am besten ein PNG oder GIF mit transparentem Hintergrund, damit kein unschöner Rand entsteht. Ich habe hier gute Erfahrungen mit einer Größe von 16px * 16px gemacht und bei mir kommt (wie oben erwähnt) eine verkleinerte Version des Wikipedia-Logos zum Einsatz.

Das ist es schon. Vorschau. Speichern. Testen. :D

Wenn man wie ich den Windows Live Writer zum Bloggen einsetzt, kann man das Ergebnis sogar in Echtzeit bewundern. Dazu erst das “Design aktualisieren” – den Punkt erreicht man im Menü “Ansicht”. Zumindest in der gerade aktuellen WLW-Beta. Das sorgt dafür, dass auch der WLW sich das neue Layout einliest und alle referenzierten Bilder lokal zwischenspeichert.

Da der WLW offensichtliche Internetadressen auch gleich beim Tippen in Links umwandelt, sieht es dann so aus wie im folgenden Filmchen:

Gar nicht so schlecht, oder?

Das Prinzip ist übrigens beliebig erweiterbar: Den CSS-Abschnitt kopieren, in die eckigen Klammern ein neues Schlüsselwort eintragen (z.B. Google, Youtube oder der eigene Blog, um interne Links zu kennzeichnen – was immer ihr wollt), ein passendes Bild/Icon auswählen – und fertig.

blog comments powered by Disqus

Design von Dicas Blogger, angepasst durch Mario Ruprecht