Viele von euch nutzen die Blogger Vorlage "Minima" bzw. "Einfach". Das schlichte weisse Design hat schließlich einiges für sich. Leider lässt sich damit der Sidebartitel aber nicht verändern.Darum möchte ich nun mit euch die Sidebar zu neuem Leben erwecken. Das schöne an diesem Tutorial ist, dass ihr damit nicht plötzlich statisch über jedem Gadget einen Titel bzw. den Platz dafür habt. Der Hintergrund oder Rahmen erscheint nur über den Gadgets, denen ihr auch einen Titel gegeben habt.Starten wir mit dem wichtigsten. Egal was wir vorhaben, erstmal müssen wir den Sidebartitel definieren. Dazu geht's auf in den HTML Bereich des Blogs (wie ihr da hin kommt lest ihr hier). Dankt daran vorher ein Backup zu machen!
Sucht nun nach diesem Bereich:
]]></b:skin>
</head>
Das ist unser Anfanng, nun folgen einige Ergänzungen:
Zum Beispiel könnt ihrEinen Rahmen um den Sidebartitel machen! Das geht, indem ihr den Code von oben noch ein wenig ergänzt, ich schreibe euch hier nochmal den ganzen Code, später folgen nur noch die Ergänzungen.
.sidebar h2 {
border:1px solid #000000;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}
Wenn ihr den Titel unsterstreichen wollt, ergänzt ihr den Code um diese Zeile:durchgehende Linie: border-bottom:1px solid #000000; gepunktete Linie: border-bottom:1px dotted #000000;
Damit der Sidebartitel eine Hintergrundfarbe hat, müsst ihr diesen Code hinzufügen:background:#a2c4c9;
In diesem Fall wäre der Hintergrund hellblau, für eine andere Farbe nehmt ihr einfach einen anderen Code. Eine große Auswahl an Farben mit Code findet ihr im HTML Bereich.
So könnt ihr die Ecken des Hintergrunds abrunden:
border-radius: 18px;
Ihr könnt auch ein Bild als Hintergrund nehmen. Dazu eignen sich alle Bilder, die die Breite eurer Sidebar haben. Sind die Bilder größer werden sie gestaucht, das kann hässlich aussehen. Ihr könnt also entweder ein Hintergrundbild gestalten oder ihr schaut euch auf den Freebies-Websites um: einige davon findet ihr in meiner Sidebar. Ladet das Bild in euren Webspace hoch und fügt nun die URL in euren Code ein:
background:url(DEINE BILD URL)no-repeat;
Wenn ihr mit Bildern arbeitet kann es nötig sein, noch ein wenig feintunig vorzunehmen. Dazu könnt ihr diesen Bereich aus dem bereits eingefügten HTML Code einwenig verändern:
padding:0 0.2em;line-height:1.5em;
}Mit "padding" verschiebt ihr das Bild horizontal, ersetzt ihr die 2 zum Beispiel durch eine 6 verschiebt sich das Bild nach rechts. Mit "line-height" verschiebt ihr das Bild vertikal.
Ich wünsche euch viel Spaß!Liebe Grüße,Anke
