{Tutorial} Seitentext in Blog-Posts und Gadgets formatieren und anpassen

Freitag, 21. August 2015

Hallo ihr! :)

Hier seht ihr ganz normalen Seitentext.
Hier seht ihr formatierten Seitentext.

Man kann mit der Menüfläche des Posts ja schon viel anfangen, aber es gibt trotzdem Sachen die man dadurch nicht machen kann. Zum Beispiel fehlt das man viele Schriftarten einstellen kann oder der allseits beliebte Textschatten.

In diesem Post erkläre ich euch wie ihr euren Text formatieren könnt wenn ihr wollt und wie ihr das macht. Bitte beachtet das ihr nicht euren ganzen Seitentext formatieren solltet. Nur wenn ihr besondere Sachen, wie Überschriften in Posts formatieren wollt um Übersicht zu schaffen.

Dafür müsst ihe viel im HTML eures Posts arbeiten. Wenn ihr ins HTML wollt, achtet einfach hierdrauf:

<span style="font-family: Sacramento;">Text</span> = Text
Wenn ihr andere als die normalen Blogger-Schriftarten benutzen wollt, hier steht beschrieben wie man Google-Fonts installiert.

<span style="font-size: 23px;">Text</span> = Text

<span style="color: #abc4a0;">Text</span> = Text
Hier könnt ihr Farben raussuchen.

<span style="background-color: #aaaaaa;">Text</span> = Text
Hier könnt ihr Farben raussuchen.

<span style="background: url(http://abload.de/img/lalabacklalam6swb.png) repeat ;padding-left: 30px; padding-right: 20px;">Text</span> = Text
sucht euch einfach einen Hintergrund und ladet ihn auf abload.de hoch. Den Direktlink einfach mit eurem Direktlink ersetzen. Padding-left macht wie weit der Hintergrund nach links geht. Padding-right macht wie weit er nach rechts geht. Ihr könnt euch noch Padding-Top für Höhe nach oben und Padding-Bottom: für Höhe nach unten einsetzen. Repeat macht das der Hintergrund sich wiederholt, ihr könnt auch no-repeat hinschreiben.

<span style="text-transform: uppercase;">Text</span> = Text
 lowercase → Text ist kleingeschrieben.
uppercase → Text ist großgeschrieben.
 capitalize → Jeder Wortanfang ist großgeschrieben.

<span style="font-style: italic;">Text</span> = Text

<span style="text-shadow: 1px 1px 1px #aaaaaa;">Text</span> = Text
 Hier könnt ihr Farben raussuchen.
 Die erste Zahl ist, wie weiter der Schatten nach rechts verschoben ist.
Die zweite Zahl, wie weit der Schatten nach unten verschoben ist.
Die dritte Zahl ist wie hart oder weich der Schatten ist.

<span style="letter-spacing: 5px;">Text</span> = Text

<span style="text-decoration: underline;">Text</span> = Text
 underline unterstreicht es.
overline überstreicht es.
line-trough durchstreicht es.

<span style="border: 1px solid #aaaaaa; padding: 5px;">Text</span> = Text
 1px ist die dicke des Kastens.
solid ist eine solide Linie. Dashed ist getrichelt, dotted ist gepunktet.
 Hier könnt ihr Farben raussuchen.
 padding ändert den Abstand von Schrift zu Kasten.

Diese Formatierungen könnt ihr eigentlich für alles auf eurem Blog anwenden das Text hat. Also in Posts und Gadgets usw. Ich würde immer empfehlen in einem leeren Post erst die Sachen, die ihr formatieren wollt, reinzuschreiben und zu verändern, bevor ihr aus dem HTML eures Posts ins Verfassen geht, den Text kopiert und irgendwo hinkopiert wo ihr es haben wollt.

Keine Kommentare:

Kommentar veröffentlichen