Tutorial - Signatur einbinden!

Aloha meine Lieben!

Heute gibt es wieder ein kleines Bilder-Tutorial von mir. Diesmal dreht sich alles darum, wie man eine automatische Signatur am Ende jedes Blogposts einfügt. Eine wirklich schöne, persönliche Idee, die in 5 Minuten erledigt ist. 

Als allererstes braucht ihr natürlich eine .png oder .jpeg Datei mit eurem Namen. Ich erstelle sowas immer mit Photoscape, da sowas in diesem Programm recht flott geht. Alles was ihr machen müsst, ist eure Signatur in der Schriftart und Größe zu erstellen, wie ihr sie später auch unter jedem Post angezeigt haben wollt. Wenn ihr eine .jpeg Datei erstellt solltet ihr darauf achten, dass die Hintergrundfarbe der Signatur auch der Hintergrundfarbe eures Blogs entspricht. In meinem Falle wäre dies weiß. 

Wenn ihr zufrieden mit eurer Signatur seid, speichert ihr diese und ladet sich auf einer Image-Host Seite hoch. Ich habe Photobucket verwendet. Wenn es hochgeladen ist, klickt auf das Bild und nun sollte etwas in dieser Richtung erscheinen. 

Was für uns nun wichtig ist, ist der Direktlink zum Bild. Bei Photobucket findet man ihn rechts unten in der Box. 

Lasst diesen Tab/ diese Registerkarte geöffnet und öffnet nun Blogger in einer neuen. Vom Dashboard aus klickt ihr auf "Vorlage" und dann auf "Anpassen".

Nun öffnet sich der Blogger-Vorlagendesigner. Wählt im linken Menü "Erweitert" aus, scrollt in dem dann erscheinenden Menü nach unten und wählt "CSS hinzufügen" aus. Dies sollte so aussehen:

Diesen CSS Code kopiert ihr nun in die Box:

.entry-content:after {
content: url(DEINE BILD URL);
margin-left: 250px;
}

Jetzt ersetzt ihr "DEINE BILD URL" durch den Direkt-Link zu eurem Bild, in meinem Fall jenes, welches ich auf Photobucket hochgeladen habe. 

Und das ist alles! Jetzt könnt ihr auf "Auf Blog anwenden" klicken und euch das Ergebnis auf eurem Blog anschauen. Wenn euch aber die Position eurer Signatur nicht gefällt, könnt ihr diese natürlich auch ändern. Alles was ihr tun müsst ist die Zahl bei "margin-left" im CSS Code zu verändern:
250 px= mittig

0px= links

500px= rechts

So und das war es auch schon. Ziemlich schnell und einfach! Ich hoffe es hat euch gefallen und ich konnte ein wenig helfen. 

Habt alle noch einen schönen Freitag!