Unterschrift einbinden {Tutorial}

In letzter Zeit beschäftige ich mich sehr viel mit dem Design meines Blogs und da wollte ich euch dieses einfache Tutorial nicht vorenthalten. Es geht darum, wie ihr in Blogger immer automatisch eure Unterschrift einbinden könnt. Das heißt, ihr öffnet euren Post und - zack - die Unterschrift ist einfach schon da und ihr müsst sie nicht umständlich aus eurem Album hervorkramen. Das erspart etwas Zeit und ich finde es sehr nützlich. Ihr könnt so natürlich nicht nur eure Unterschrift einfügen, sondern auch dem Post eine Vorlage geben. Wer zum Beispiel immer die gleiche Vorlage benötigt und diese immer von einem Post zum anderen weiterkopiert, für den ist dies eine passende Alternative.

Bild oder Text?

Zuerst benötigt ihr eure Unterschrift. Ihr könnt entweder ein Bild erstellen und dieses dann einfügen oder einen formatierten Text. Überlegt euch die Unterschrift gut, denn die Unterschrift wird ab der Änderung bei allen neuen Post übernommen, jedoch nicht rückwirkend auf die alten. Natürlich könnt ihr jeden älteren Post ändern, aber für viele ist das zu aufwendig. Deshalb lasse ich meine alten Unterschriften noch so stehen, weil ich sie ja nicht schlecht finde, nur die neue Variante besser. Sucht euch deshalb etwas, mit dem ihr länger eine Freude habt. Spätestens bei einem komplett neuen Blogdesign könnt ihr dann auch die alten Posts ändern. 

Ich habe bisher immer ein Bild eingefügt gehabt, aber nun bin ich zu einem Text gewechselt. Der Grund war, dass das Bild nicht mehr zu meinen anderen Schriftarten im Blog gepasst hat. Das Bild habe ich damals mit picmonkey erstellt. Es gibt aber auch einige andere Editoren, wie zum Beispiel Fotor. Nun finde ich die Textvariante besser, da man diese abhängig vom Blogdesign machen kann. Ich habe zum Beispiel die Unterschrift im gleichen Stil wie meine Post-Überschrift. Ändere ich die Post-Überschrift, ändert sich die Unterschrift also mit. Doch dazu kommen wir später. Erstellt euch also ein Bild oder einen Text, ganz wie ihr wollt.

Text erstellen

Erstellt euren Text am besten direkt in einem Blogger-Post. Natürlich könnt ihr manuell alles ändern, ich empfehle euch aber eine der Überschriften eures Blogs zu wählen Diese sind von h1 bis h4 festgelegt und können direkt beim Bearbeiten des Posts unter Absatzformat ausgewählt werden. Wenn euch keine davon als Unterschrift gefällt, könnt ihr auch eure eigene Überschrift erstellen. Dafür müsst ihr in euren HTML-Code und beispielsweise eine neue Überschrift h5 im CSS definieren. Sucht dazu nach "Headings" und ihr kommt zu folgenden Code Teil:

/* Headings

----------------------------------------------- */

h1 {

  font: $(header.font);

  color: $(header.text.color);

}

...

Darunter findet ihr wahrscheinlich auch noch die Formatierungen für h2 und so weiter. Fügt danach folgendes ein und ändert es für eure Unterschrift entsprechend um. Ihr könnt Attribute wie Schriftart, Ausrichtung, Farbe und noch viel mehr festlegen. Dabei kann euch diese Seite weiterhelfen: wiki.selfhtml.org

h5 {

  color: #5B6E31;

  text-align: right;

  ...

}

Das Aussehen könnt ihr überprüfen, indem ihr einen leeren Post öffnet, in die HTML Ansicht wechselt und folgendes einfügt:

<h5>Dein Name</h5>

Wenn ihr zufrieden mit dem Ergebnis seid, dann geht es weiter zum nächsten Schritt.

Unterschrift festlegen

Habt ihr nun eine passende Unterschrift, so müsst ihr diese festlegen. Dafür gehen wir für Bild und Text etwas anders vor. Für das Bild braucht ihr dessen URL und für den Text eine Codezeile. Im Dashboard geht ihr nun unter Einstellungen → Posts, Kommentare und geteilte Inhalte und fügt folgenden Code in das Feld "Post-Vorlage" ein:

Bild

<br /><p>

<br /><img style="border:0;" align="right" src="URL" /><br />

</p> <br />

Statt URL benötigt ihr eure Bild-URL. Die erhält ihr wie folgt: Fügt das Bild in einem Post ein und macht einen Rechtsklick darauf. Wählt: Bild-URL kopieren. 

Text

<br /><p> 
<h5>Dein Name </h5>
</p> <br /> 

 

Wenn euch eine der Überschriften von h1 bis h4 gefallen haben fügt statt h5 diese ein. Ihr könnt außerdem eine der Überschriften h1 bis h4 auch direkt hier in dem Tag unter style noch anpassen. Die folgende Codezeile verwende ich derzeit auf meinem Blog. Die Schriftart und alles andere sind im CSS unter h1 festgelegt, hier habe ich nur die Textausrichtung und clear geändert.

<br /><p>
<h1 style="clear: both; text-align: right;">Sarah</h1></p>
<br /> 

 

Und aussehen tut es wie folgt:

Sarah

Außerdem: 

In dieses Feld der Post-Vorlage könnt ihr natürlich alles Mögliche einfügen. Wenn ihr zum Beispiel immer ein bestimmtes Bild haben wollt, oder einen Text zu Beginn, könnt ihr das auch hier machen. Dieses Tutorial konzentriert sich aber auf die Unterschrift. Ich hoffe, es hat euch geholfen und ihr spart euch etwas Zeit!