Bloggertipps #2

Farbiger Balken hinter Titel in Sidebar

Um einen farbigen Balken, so wie hier bei irgendschoen, hinter den Titeln in der Sidebar zu haben, befolgt man einfach folgende Schritte...

HINWEIS: Dieser HTML-Tipp müsste mit allen Vorlagen aus dem Vorlagen-Designer funktionieren (Danke an MelancholieDesEises für den Hinweis!). Layouts von Fremdautoren außerhalb von Blogger haben evtl. eine andere HTML-Struktur benutzt!

GRUNDSCHRITTE

1. h2 { im HTML-Code suchen.


2. Diese beiden Zeilen hinter das letzte Semikolon (;) setzen:

background-color: #333333;
display: inline;

In meinem Testblog sieht der Code jetzt zum Beispiel so aus:

Der sechsstellige Hex-Code #333333 steht für ein dunkles Grau. Hier müsst ihr natürlich einsetzen, was euch als Hintergrundfarbe gefallen würde. Hier findet ihr eine Farbtabelle mit Hex-Codes!

Die Zeile display: inline; bewirkt, dass nur der Titel unterstrichen wird. Wollt ihr, dass der farbige Hintergrund bis zum Ende der Zeile geht, ungeachtet wie lang der Titel an sich ist, ersetzt ihr inline mit block.

Die Höhe des Balkens verändert ihr nur, wenn display: block; vorhanden ist, und zwar mit Anhängen der Zeile line-height: 20px;
Natürlich müsst ihr hier ein bisschen experimentieren, welcher Zahlenwert und die damit zusammenhängende Zeilenhöhe euch am besten gefällt.

Wollt ihr die Schriftfarbe ändern, geht über den Vorlagendesigner (Erweitert > Gadgets > Titelfarbe). Natürlich könnte ihr auch einen beliebigen Farbcode bei color einsetzen. Dann ist diese Eigenschaft jedoch nicht mehr über den Vorlagendesigner editierbar, nur noch manuell im Code!


3. Unter Umständen wird die Formatierung für h2 auch auf das Datum bezogen. Falls dies passiert und ihr das nicht wollt, befolgt diese letzten Schritte.


4. Im HTML-Code .date-header span suchen.


5. Diese Zeile hinter das letzte Semikolon (;) setzen:

background-color:#ffffff;

In meinem Testblog sieht der Code jetzt zum Beispiel so aus:

Der Hex-Code steht hier für reines Weiß. Auch hier gilt - bevorzugten Farbwert einsetzen! Habe hier Weiß eingesetzt, weil die Hintergrundafrbe meines Testblogs Weiß ist ;)

Ich hoffe, ich konnte dem ein oder anderen damit helfen! Bei Fragen zu diesem Tutorial überprüft bitte erst, ob ihr wirklich alle Schritte befolgt habt & fragt dann ggfs. in diesem Post. 

Bitte habt Verständnis dafür, dass ich keine Zeit habe für Nachfragen wie "Hilfst du mir mit meinem Layout?" oder "Erklärst du mir HTML?". Meine Bloggertipps entstehen durch mehrfache Anfragen zu demselben Thema, oder, weil ich finde, ein interessanter Effekt müsste erklärt werden.