Post-Divider ♥♥


Heute ein Tutorial, das an der von ShabbyBlogs angelehnt ist. Das Tutorial von ShabbyBlogs gibt es schon länger, dazu folgt hier nun die deutsche Version. Dazu zeige ich euch noch, wie ihr einen einfachen Postdivider ohne Grafik einbauen könnt!



Der Code:

Wir suchen erstmal im "HTML bearbeiten" nach dem Bereich ".post" - das kann je nach Vorlage variieren, mit dem Dev-Tool könnt ihr es für eure Vorlage heraussuchen (Anleitung).



Der Postdivider:

Schöne Postdivider findet ihr auch auf ShabbyBlogs. Die müsstet ihr eurer Postbereichbreite anpassen. Dafür benutzt ihr einfach Photoscape, Photoshop, sogar mit dem neuen Paint funktioniert das!

Alternativ könnt ihr auch einen eigenen erstellen, dazu eignen sich gut Photoshop, Gimp o.ä., diese müsstet ihr nur noch hochladen (via Photobucket, Flickr, etc.).


Der Code:

Stelle gefunden und passenden Divider gefunden? Here's your Code:
background: url(http://DIVIDERADDRESS.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;

Fügt diesen ein, sodass es so aussieht:



Natürlich noch den Link des Bildes ergänzen und speichern. Schon habt ihr es!


Alternativ: einfache Trennlinie

Im gleichem HTML-Bereich gebt ihr diesen Code ein:
border-bottom: 1px solid #dddddd;
1px könnt ihr mit einer beliebigen anderen Zahl austauschen, die die Dicke der Trennlinie bestimmt, solid steht für eine durchgehende Linie, kann durch dotted (gepunktet) oder dashed (gestrichelt) ersetzt werden und #dddddd ist der Hexcode für ein sanftes Grau, welches ihr mit einer x-beliebigen Farbcode austauschen könnt. Weitere Farben könnt ihr hier aussuchen. Danach dann speichern und fertig ist es :)

Liebe Grüße,
Mira

21 Kommentare

  1. Irgendwie tut sich bei mir gar nichts.
    also ich sehe gar keine veränderung wenn ich auf "vorschau" klicke :(

    AntwortenLöschen
    Antworten
    1. ich komm nicht auf deinen blog, sonst würde ich mal nachschauen :(

      Löschen
  2. Wundervoll... vielen lieben Dank.. dank euch krieg ich meine BlogSeite doch noch etwas ansprechender und schöner gestaltet...

    GLG

    AntwortenLöschen
  3. Ich finde .post nicht also bei mir steht das da:


    Und wenn ich das da drunter schreibe/kopiere und speicher, dann geht das nicht, man sieht das dann nicht. :(

    AntwortenLöschen
  4. Oke, den HTML code kann man hier nicht hinschreiben. :/ Also in das Kommentar.

    AntwortenLöschen
    Antworten
    1. Versuch doch, es mit dem Dev Tool herauszufinden. Steht auch im Post + Link zur Anleitung.

      Löschen
  5. Wenn ich das mache, dann kommt immer das:"
    Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor"

    AntwortenLöschen
    Antworten
    1. Da stimmt dann wohl etwas nicht mit dem border, hast du den Farbcode falsch geschrieben? Der darf maximal nur 6 Zeichen haben!

      Löschen
  6. hi kannst du auch mal tutorials machen, wie man header erstellt?

    AntwortenLöschen
  7. Ich komm damit gar nicht klar Oo

    ich will einen neuen bzw einen 2ten Blog erstellen, nur diesmal in hübsch.

    Aber ich komm damit absolut nicht zurecht :/

    AntwortenLöschen
  8. genau das habe ich gesucht, aber bei mir finde ich .post und des mit margin ... nicht :((

    AntwortenLöschen
  9. Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor


    das kommt bei mir in rot, wenn ich die Änderungen speichern will. Dabei habe ich alles genauso gemacht, wie beschrieben...

    AntwortenLöschen
  10. huhu(:

    ich finde das Tutorial echt toll, aber ich habe alles eingegeben wie beschrieben und es erscheint aber nix :(

    was mach ich falsch ?

    AntwortenLöschen
  11. Bei mir steht folgendes, wenn ich auf "Vorschau" klicke:

    Ungültige Variablenangabe in Seitendesign: Variable wird verwendet, ist aber nicht definiert. Eingabe: bordercolor
    Error 500


    Unter .post kann man es auch nicht finden, weil es ganz oben auch noch sowas gibt. Ihr müsst
    .post {
    eingeben, dann kommt ihr genau an die Stelle.

    AntwortenLöschen
  12. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
    Antworten
    1. (falscher Account xD)

      Wenn das .post { nicht vorhanden ist im Code, einfach selber einfügen, aber vorsicht } nicht vergessen. Dann den Code für den Divider einfügen zwischen die geschwungenen Klammern und url für das bild einfügen. Zu letzt dann noch $bordercolor löschen, aber ohne den ; sonst gibts Fehler. Dann müsste es funktioneren. :)

      Liebe Grüße
      fairytale ♥

      Löschen
  13. Bei mir geht das nicht.Die stelle wo es eingefügt werden soll gibt es nicht ?!
    Ich habe mit Strg und F gesucht.

    AntwortenLöschen
  14. Ich hab gesucht, irgendwas gefunden und den Code da eingesetzt- jetzt habe ich das Bild unter dem Posttitel, wie ein Unterstrich, und es gefällt mir noch besser :D Danke!

    AntwortenLöschen
  15. Ich würde das voll gerne machen, aber ich habe mein Template selbst geschrieben und da gibt es den Post. Teil auch nicht, Kennst du eine alternative?

    LG,
    Franzi

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!