Sonntag, 6. April 2014

Post-Divider (Beitragstrenner) einfügen

Erstelle dir zuerst deine Grafik für den Post-Divider, z.b. ein einfaches Ornament.



Lade die Grafik dann wie bei den Social Media Icons beschrieben in eine Seite hoch ...


... und kopiere den Bildpfad.


Der Code lautet dann wie folgt:

<img border="0" src="http://2.bp.blogspot.com/-FJijx0m6o4E/U0Et70dM6oI/AAAAAAAABMk/oDVT-AdKHn4/s1600/separator.png" />

(natürlich ersetzt mit deinem eigenen Bildpfad). Den Bildpfad inklusive http:// kopierst du dir heraus.

Nun gehst du im Blogger-Dashboard auf "Vorlage" und "HTML bearbeiten".


Drücke Strg+F und durchsucht den Code nach dem Wort ".post {".





Dort fügst du diesen Code ein:

background: url(deinbildpfad.jpg);
background-repeat: no-repeat;
background-position: bottom center;

margin: 10px 0 30px 0;
padding-bottom: 90px;


Anstelle von deinbildpfad.jpg fügst du nun den oben kopierten Bildpfad von deinem Upload ein:

http://2.bp.blogspot.com/-FJijx0m6o4E/U0Et70dM6oI/AAAAAAAABMk/oDVT-AdKHn4/s1600/separator.png

Die Angaben für das "padding-bottom" variieren je nach Grafik, da kannst du ein bisschen rumprobieren. Dann klickst du auf "Vorlage speichern". Dein Post-Devider ist nun eingebunden.



Kommentare :

  1. Schade, dass funktioniert bei mir leider gar nicht. :-(
    Gruß susanne



    Ach ja, kannst du mir vielleicht verraten, wie man unterjedem Post die kleinen Postvorschauen von alten Post hinbekommt?

    AntwortenLöschen
  2. Ich kann mir deinen Blog gern mal anschauen, da ich jetzt auch HTML-Bloghilfe anbiete. Bitte sende mir hierzu eine Mail an info(at)julia-braeunig.de

    Liebe Grüße,
    Julia

    AntwortenLöschen
  3. Hi,
    danke für die vielen tollen und hilfreichen Tipps :)
    Ich habe aber eine Frage...nämlich wie bekomme ich in der Sidebar divider?

    Liebe Grüße :)

    AntwortenLöschen
  4. Hallo,
    schöne Erklärung. Allerdings funktioniert es bei mir nicht. Ich bekomme zwar das die Imagedatei bei mir auf die Seite. Aber ganz oben, verzogen und einige Angaben von dem Code.

    Wäre schön, wenn ihr mir helfen könntet.

    Lg

    AntwortenLöschen
  5. Klappt bei mir leider auch nicht. Ich kann .post { einfach nicht finden. LG

    AntwortenLöschen
  6. Ich habe leider ebenso das Problem, dass ich .post { nicht finden kann :(

    AntwortenLöschen
  7. Ich habe auch das Problem, dass ich .post nicht finden kann... wirklich schade :(

    AntwortenLöschen