5202

ein Blog über technische Fragen zu Blogger

Blogger: Kommentare durchnummerieren

von
Weil das inzwischen so oft gefragt worden ist: Das folgende funktioniert nur, falls ihr eure Kommentare auf 'Eingebettet' stehen habt - für alle anderen Einstellungen könnt ihr keine eigene CSS definieren.

Heute am Karsamstag gibt's eine kleine Idee, die ich nützlich finde, nämlich die Kommentare mittels einer simplen CSS durchzunummerieren.

Inzwischen gibt's ja schon einige Zeit 'threaded Comnments' auf Blogger und auch einige Anleitungen, wie man die Kommentare mit Javascript durchnummerieren kann. Ich bin der Meinung, Javascript sollte immer nur dann verwendet werden, wenn es keine CSS-Lösung gibt und è voilá, so ein Lösung gibt es! Nämlich mit dem Pseudoelement :before und der CSS3 Eigenschaft counter-increment. Das funktioniert sogar im IE7+, also ist fast schon eine Standardeigenschaft.
Beispiel
Wie das später ausschaut könnt ihr am besten an meinen eigenen Kommentaren sehen, dort habe das nämlich schon umgesetzt.

CSS

Die CSS habe ich in zwei Versionen geschrieben - abhängig davon, ob ihr eure gesamten Kommentare an einem Stück durchnummerieren, oder ob ihr bei 'Antworten' auf andere Kommentare wieder bei "1" anfangen wollt.
CSS für alle Kommentare
 .comment-thread ol{
  counter-reset: i;
}
.comment-thread ol ol {
  counter-reset: ii;
}
.comment-header:before {
  content: counter(i,decimal)".";
  font-weight: bold;
  color: #ad3a2b;
  counter-increment: i;
  float: left;
  padding-right: 3px;
}
CSS für 'Antworten' wieder bei "1" starten
 .comment-thread ol{
  counter-reset: i;
}
.comment-header:before {
  content: counter(i,decimal)".";
  font-weight: bold;
  color: #ad3a2b;
  counter-increment: i;
  float: left;
  padding-right: 3px;
}

Anwendung

Angewendet wird das, indem ihr im diese CSS im Blogger-Vorlagendesigner > Erweitert > "CSS hinzufügen" einsetzt und hinter der letzten geschweiften Klammer } der letzten Zeile die Taste 'Eingabe' drückt. In der Live-Vorschau unten seht ihr dann das Ergebnis [d.h. ihr seht vermutlich nichts :=), weil auf der Startseite ja keine Kommentare sind]. Mit "Auf Blog anwenden" speichert ihr die Änderung.
Anpassen
Ihr könnt die Farbe des 'Zählers' unter color:#..., die Schriftstärke unter font-weight:... und den Abstand zu den Kommentaren mit dem Wert bei padding-right. Ich habe in der CSS oben die CSS gegeben, die ich selber verwende, ihr könnt sie natürlich beliebig anpassen.

Kommentare

Ich finde es nützlich, den Kommentarbereich bei vielen Kommentaren a bisserl besser zu gliedern. Das ist vielleicht nur ein ganz kleines Detail, aber gerade so etwas macht den Unterschied. Wie seht ihr das? Sinnvolles oder sinnloses Feature?