Variabeln für Blogger Blogs ✤✤✤

To all the English Readers: There is no English Version of this Tutorial, because there are a lot of very detailed posts about writing variables for blogger in english, and since I usually follow the rule: "Do What You Do Best, Link To The Rest" I'm just gonna send you to the place where I learned it. Link. Still, if you have any questions, feel free to ask.

Der Grund warum ich diesen Post schreibe ist der, dass ich bei meiner Suche nach Tutorials zu diesem Thema bloss uralte oder sehr unvollständige Posts (auf Deutsch) gefunden habe. Ich sage nicht, dass ich einen allumfassenden Post schreiben kann, aber zumindest einen Grossteil in abdecken möchte, für all diejenigen, die gerne eigene Variabeln in ihren Blog schreiben möchten, oder das Ziel haben Templates zu erstellendie mit dem Vorlagendesigner kompatibel sein sollen. Trotzdem befolge ich eigentlich immer den Spruch: "Do what you do best, link to the res" (tu, was du am besten kannst, verlinke den Rest) und verweise auch für alle unter euch, die mit English zurechtkommen auf den Link oben, denn dieser Post hat mir das Variabelnschreiben beigebracht.

Variables - the basic

Grundlegend sieht eine Variable so aus:

<Variable name="variable.name" description="Variable Description in Designer" type="type" default="XXX" value="YYY"/>

Also was ihr tut ist die Variable mit einem Namen zu versehen, das ist der Name, den wir dann später verwenden müssen, um die Variable zu anzuwenden.

Danach folgt eine Beschreibung der Variable, das ist der Text, der dann oberhalb der Auswahl angezeigt wird.



Als nächstes definieren wir dann den Typ der Variable, also was für eine Variable das ist und dann wird der Default-Wert gegeben, also das, was wir haben wollen, wenn die Variabeln auf Standart zurückgesetzt werden. Zum Schluss kommt der tatsächliche Wert der Variable.

Variables - Types

Es gibt verschiedene Variabel-Typen, die ich im folgenden kurz erklären möchte.

Color

ist wahrscheinlich die bekannteste Variable. Hier werden Farben geändert. Die Wertzuweisung funktioniert hier also mit HEX-Farben.
Eine umgesetzte Colorvariable würde in normalen CSS also zum Beispiel so aussehen:

color: #2e2e2e;

Font

Damit werden Schriften angegeben. Das Schema läuft auch hier so ab, wie in CSS geschrieben:

font: normal normal 16px Calibri;

wobei die beiden normals für nicht-kursiv und nicht-fett stehen. Dann die Schriftgrösse und Schriftart.

Background

Diese Variable ist für den Blog-Hintergrund zuständig, damit man ein Bild uploaden kann.
Ein default würde hier wahrscheinlich so aussehen, da da noch kein Bild hochgeladen ist:

background: $(color) none repeat scroll top left;

Ihr seht, hier ist eine Variable in der Variable drin. Dazu werde ich noch spezifisch etwas sagen.

String

Die String-Variable wird nicht im Vorlagendesinger angezeigt, ich füge sie trotzdem ein, da ich sie echt praktisch finde, wenn Leute nicht gerne suchen.

Length

Und diese Variable wird verwendet, wenn ihr an nicht-responsiven Designs arbeitet und die Breiten mit Pixeln anpassen wollt.

Variable Groups

Wenn ihr den Vorlagendesigner anguckt, gibt es auf der Seite eine "grosse" Überschrift und die einzelnen Variabeln zu diesem Thema finden sich nebeneinander. Um das zu tun, müssen die Variabeln in eine Variabel-Gruppe eingefügt werden.
Eine Gruppe könnte zum Beispiel so aussehen:

<Group description="Backgrounds" selector="body">
    <Variable name="body.background.color" description="Background" type="color" default="#fffff0" value="#fffff0"/>
    <Variable name="container.background.color" description="Main Container Background" type="color" default="#fffff0" value="#fffff0"/>
    <Variable name="content.background.color" description="Content Background" type="color" default="transparent" value="transparent"/>
    <Variable name="sidebar.background.color" description="Sidebar Background" type="color" default="transparent" value="transparent"/>
</Group>

Background-Upload-Variable

Okay, die Farb und Font-Variabeln werde ich jetzt nicht noch spezifisch erklären, da sie eigentlich sehr logisch sind, jetzt kommt aber die Background-Variable, da sie eine Variable ist, die eine Variable in sich trägt.
So könnte sie zum Beispiel aussehen:

 <Variable name="body.background" description="Body Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipvTAXBEW9XkjlpQlU_sDKEVlemnrOfmMprjE0ZvKoYAIeMvegOD0SugedHyLMAQEColZCSDd8Gj1DybDRRTELd0XafET5IWecdF6s9DGJvj-QCbpia1kX23TOdENMKUkpJoOw50AqK1e4/s1600/mooning.png) repeat fixed top left"/>

Ihr seht, hier ist die Farbe, die als body.background definiert ist, die Hintergrundfarbe, also wenn ich beispielsweise ein transparentes Bild als Hintergrund definiere, würde man diese Farbe durchscheinen sehen. Dann ist da noch die Angabe, ob das Bild gekachelt wird, oder nicht, ob fixiert oder scrollend und wo das Bild positioniert wird. Also eigentlich ganz simpel, für jeden, der CSS schreiben kann.

Width-Adjustments (responsive)

Eine responsive Lösung für die Breiten mit Variabeln habe ich gefunden. Sie erfordert zwar, dass der Benutzer die Variable im HTML ändert, da der Vorlagendesigner sie nicht anzeigt, aber man muss nicht die komplette CSS durchsuchen, sondern nur einen value-Wert anpassen. Es gibt theoretisch auch die Möglichkeit die Regler für die nicht-responsive Lösung unter der Breiten-Anpassung im Vorlagendesigner einzfügen, da diese Templates allerdings wahrscheinlich eh bald der Vergangenheit angehören, lasse ich diese Möglichkeit aus.

Für die repsonsive Version habe ich folgende Variablen geschrieben.

   <Variable name="content.width" description="Content Width Use %" type="string" default="67%" value="67%"/>
   <Variable name="blog.width" description="Blog Width Use %" type="string" default="70%" value="70%"/>
   <Variable name="sidebar.width" description="Sidebar Width Use %" type="string" default="30%" value="30%"/>

Die Benutzer müssen also bloss nach Blog Width suchen und werden diese Variable finden, ohne dass sie die CSS durchforsten müssen.

Application

Okay, wo wird das ganze eingefügt.
Als erstes braucht ihr die skin-tags eures Blogs.
Wenn ihr Vorlagen wie Simple anseht, versteht ihr schnell wie es geht.

<b:skin><![CDATA[*/
-----------------------------------------------
Blogger Template Style
Name:     Template Title
Designer: Myriam KreaTief
URL:      bekreatief.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================

[VARIABLES]

*/

[CSS]

]]></b:skin>

Die Variabeln befinden sich in einem Kommentar drin. Wenn das Template geladen wird, werden die implementierten Variabeln in der CSS durch den Value-Wert ersetzt.

Um eine Variable zu verwenden, fügt ihr einfach ein Dollar-Zeichen und den Namen eurer Variable in der CSS ein.

Habt ihr also eine Farbvariable die body.text.color heisst, verwendet ihr sie in der CSS:

body{ color: $(body.text.color)}

Und das wär schon alles.
Dann lässt sich das alles über den Vorlagendesigner steuern.

Ich hoffe das war hilfreich und wenn ihr Hilfe braucht oder noch Fragen offen sind, einfach bescheid geben :)