5202

ein Blog über technische Fragen zu Blogger

Blogger: Punkte vor Posttitel setzen

von

Für die Überschrift zu diesem Post habe ich a bisserl nachdenken müssen. Damit klar wird worum es geht - Hintergrund für diesen Post ist die Frage einer Leserin, wie sie in ihrem Blog kleine 'Schmuck'-Grafiken vor jedem Posttitel bekommt. Ich habe dafür eine universelle & allgemeine Lösung gesucht, die sich in jeder Blogger-Vorlage und für jede Grafik anwenden lässt. Als erstes eine einfache Demo, wie das später ausschaut.

Demo

Ein roter Punkt vor der Überschrift

Schritte

Die simpelste Lösung ist die Grafik als Pseudoelement ::before in die Überschrift einzubinden. Als erstes braucht ihr natürlich dazu eine eigene Grafik - in die Blog-Überschrift bekommt ihr sie dann mit dieser CSS:
Altes Dashboard-Layout
Dashboard > Design > Vorlagendesigner > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden
Neues Dashboard-Layout
Dashboard > Vorlage > 'Live im Blog' anpassen > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden
Code
h3.post-title::before {
  content: url(http://eureGrafik.png);
  display: inline-block;
  position: relative;
  top: 0px;
  left: 0px;
  margin: 0 5px 0 0;
}

Feinanpassung

Jede Grafik ist unterschiedlich, mit diesen 'Stellschrauben' könnt ihr eure Grafik perfekt in die Überschriften einpassen:
Abstand nach rechts
margin: 0 5px 0 0;
Der margin Wert regelt den Abstand der Grafik nach rechts zu der Überschrift. Höhere Werte als 5px ergeben mehr Abstand.
Ausrichtung nach oben und links
top: 0px;
  left: 0px;
Mit dem Wert top könnt ihr eure Grafik 'mittig' zur Überschrift setzen, ein höherer Wert setzt die Grafik nach unten. Mit left verschiebt ihr eure Grafik nach rechts.

Keine Grafik zur Hand?

Für einen simplen Punkt braucht es eigentlich keine Grafik - das geht auch mit purer CSS. Für die Demo oben habe ich den Punkt etwa damit gebaut:
h3.post-title::before {
  content:"";
  display: inline-block;
  position: relative;
  top: 8px;
  left: 0;
  width: 24px;
  height: 24px;
  margin: 0 5px 0 0;
  background: red;
  -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
          border-radius: 50px;
}

Fragen? Anmerkungen?

Nichts funktioniert und ihr versteht nur Bahnhof? Dann fragt einfach nach, vielleicht finde ich eine Lösung!