Unterstrich bei Links entfernen

Standardmäßig bekommen fast alle Links in einem Blogspot-Blog einen Unterstrich, wenn man mit der Maus darüber fährt. Das Kommando dafür ist bei den Layout-Vorlagen für drei verschiedene Bereiche vorgegeben:

• Post-Titel
• Sidebar
• Sonstige Bereiche des Blog

Man kann die Unterstriche überall rausnehmen oder aber nur in einem der oben genannten Bereiche. Folgend sind die CSS-Kommandos aufgeführt, die man dafür unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eintragen und auf das Blog anwenden muss:

---

/* Alle Blog-Bereiche außer Posttitel und Sidebar: Unterstrich beim Link-Hover entfernt */
a:hover {
text-decoration: none;
}

/* Post-Titel: Unterstrich beim Link-Hover entfernt */
h3.post-title a:hover {
text-decoration: none;
}

/* Sidebar: Unterstrich beim Link-Hover entfernt */
.sidebar .widget a:hover {
text-decoration: none;
}

Will man den Unterstrich nur in bestimmten Gadgets rausnehmen, dann muss man im Quelltext die ID des entsprechenden Gadget ermitteln, um dann ein CSS-Kommando nach folgendem Muster eintragen zu können:

/* Label1: Unterstrich beim Link-Hover entfernt */
#Label1 a:hover {
text-decoration: none;
}

Ersatzweise als Hover-Effekt eine alternative Schriftfarbe einsetzen, wo das fehlt

Achtung, in manchen Bereichen ist der Unterstrich der einzige voreingestellte Hover-Effekt; denn nicht für alle Bereiche kann man im Vorlagendesigner unter den vorgefertigten Einstellmöglichkeiten alternative Farben für Link-Hover angeben.

Notfalls kann man die Hover-Farbe für Links in einem bestimmten Bereich aber über CSS hinzufügen nachtragen. Man muss im Quelltext dafür die ID bzw. die Klasse des Bereichs ermitteln, für den die Hover-Farbe für Links gelten soll.

Für das erste Label-Gadget beispielsweise sähe ein solches Kommando wie folgt aus (Farbe rot markiert, muss gegen die gewünschte Farbe getauscht werden):

/* Label1: Link-Farbe bei Hover */
#Label1 a:hover {
color: #FF0000;
}

Um in einem bestimmten Bereich sowohl den Unterstrich rauszunehmen als auch eine Hover-Farbe einzusetzen, schreibt man die Kommandos in ein gemeinsames Päckchen, wie in dem folgenden Beispiel:

/* Label1: Link-Hover-Unterstrich durch Link-Hover-Farbe ersetzt */
#Label1 a:hover {
text-decoration: none;
color: #FF0000;
}

Ute Ziemes, sg.utez.de, 2014-07-10