05 April 2013

Tutorial: Post-Divider einfügen

Hallo,

manche Blogdesigns, wie dieses hier, haben ein kleines Problem: Posts, die am gleichen Tag veröffentlicht werden, gehen nahtlos ineinander über und weisen keine Trennung auf. Dafür gibt es sogenannte Post-Divider, die eine klare Trennung zwischen den verschiedenen Posts darstellen.

Auf COPYPASTELOVE habe ich ein Tutorial dafür gefunden, auf meinem Blog hat es allerdings nicht funktioniert, weswegen ich daran ein wenig rumgebastelt habe. Und rausgekommen ist dabei das:

1. Entwerft einen Divider nach eurem Geschmack mit dem Bildbearbeitungsprogramm nach eurem Geschmack. Ladet danach das Bild irgendwo hoch (am besten Picasa).

2. Geht auf Vorlage > HTML bearbeiten > Widget-Vorlagen komplett anzeigen.

3. Drückt die Tasten Strg. und F gleichzeitig und gebt im Suchfeld .post-footer ein. Das ist sehr wichtig, da bei CopyPasteLove nur .post angegeben wurde und diese Bezeichnung bei einigen Blogs in dieser Form nicht existiert.

4. Der wichtige Bereich sollte nun so aussehen:
.post-footer {
  margin: 0em 0 0;
}
In eurem "margin"-Bereich könnten andere Werte stehen, aber das ist nicht so wichtig.

5. Nun kopiert folgenden Befehl direkt unter den "margin"-Bereich über diese "}" Klammer:
background:url(http://URL von eurem Post-Divider.png oder .jpg);
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom:5.5em; 
Hier gebt ihr die URL von eurem Divider ein.

Dort könnt ihr auch center oder right eingeben, je nachdem wie genau euer Divider positioniert sein soll. Bei mir ist der Divider merkwürdigerweise zentrierter, wenn ich left eingebe und nicht center.

sodass es am Ende so aussieht:
.post-footer {
  margin: 0em 0 0;
background:url(http://URL von eurem Post-Divider.png oder .jpg);
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom:5.5em;
6. Dann natürlich erstmal auf "Vorschau" klicken und wenn ihr zufrieden seid, dann auf "Vorlage speichern".

Ich hoffe, dass euch das Tutorial ein wenig hilft und verständlich ist.



1 Kommentar:

  1. Ich seh zwar bei mir das er was macht, aber egal mit welchem Bild ich es mache - das Bild zeigt er mir nicht an :(

    AntwortenLöschen