{Tutorial} Kleines Bild am Anfang des Post-Titels

Samstag, 9. Januar 2016

Vorher:

Nachher:

Hodwie! Heute erkläre ich euch wie ihr ein kleines Bildchen vor euren Post-Titel bekommt. Es geht ganz einfach!

Als erstes braucht ihr ein Bild das ihr benutzen wollt, die größe ist egal, aber es sollte natürlich wenn möglich die gleiche Hintergrundfarbe wie euer Post-Hintergrund haben oder transparent sein. Ladet dieses auf Abload hoch.

Geht auf euren Blog -> Design -> Vorlage -> Anpassen -> Erweitert -> CSS hinzufügen.

Dort fügt ihr folgendes ein:
.post-title {
padding-left: 75px;
background: url(DIREKTLINK DES BILDES) no-repeat 2%;
background-size: 65px;
}


padding-left: 75px; -> Hiermit kann man einen kleinen Abstand zwischen Posttitel und dem linken Rand einstellen. Wenn ihr euren Post-Titel zentrieren wollt, löscht die Zeile und fügt folgendes ein:
text-align: center;

DIREKTLINK DES BILDES Hier müsst ihr den Direktlink eures Bildes einfügen den ihr von Abload bekommen habt.

no-repeat könnt ihr durch repeat ersetzen wenn sich das Bild hinter dem kompletten Posttitel wiederholen soll (was ich nicht empfehle).

Wenn ihr die 2% verändert könnt ihr den Abstand des Bildes zum linken Rand ändern, das ist sehr hilfreich wenn ihr das Bild zB hinter dem Titel haben wollt wenn ihr den zentriert habt.

background-size: 65px; -> Hiermit könnt ihr einstellen wie groß das Bild sein soll.

Hab ja gesagt, ganz easy peasy.

Hat das Tutorial geholfen?




Keine Kommentare:

Kommentar veröffentlichen