Strich unter Post-Footer ♥♥


Heute zeige ich euch, wie man unter dem Post-Footer eine Abtrennlinie zaubert.

1. Geht auf "Layout" auf eurem Dashboard. Öffnet "HTML bearbeiten". Sucht mit Strg+F nach ".post-footer"



Ihr findet diesen Punkt nicht? Dann schaut nach Footer und sucht etwas, das so ähnlich heißt und ähnliche Unterpunkte hat wie das, was wir hier haben.


2. Fügt "border-bottom:" ein.

Das, dass danach steht, bestimmt, wie dieser Strich aussieht.


Unser Beispiel:

border-bottom: 1px solid #222222;

1px = Dicke des Striches
solid = Strich ist durchgezogen
#222222 = Farbe des Striches

solid könnt ihr je nach Belieben austauschen, hier ist eine Liste aller möglichen Namen:

dotted = gepunktet
dashed = gestrichelt
solid = durchgezogen

 Die Farbe könnt ihr hier bestimmen und eingeben:



3. Speichert ab. Schon habt ihr eine Abtrennung zwischen den Posts!

62 62 Kommentare

  1. Danke für das Tutorial :)
    Wurde direkt auf meinem Blog umgesetzt :)

    AntwortenLöschen
  2. hey ich habe mal eine frage, wie stellt man mehere seiten auf sein Blog da. wie z.b bei euch: Home, Tutorials, Bildbearbeitung usw.
    Habt ihr schon ein Tutorial darüber gepostet?

    AntwortenLöschen
    Antworten
    1. ja wär auch eine riiiesen bitte von mir ;)

      Löschen
    2. Schaut mal hier
      http://www.copypastelove.org/2011/07/wie-erstelle-ich-ein-menu-teil-1.html
      und hier
      http://www.copypastelove.org/2011/07/wie-erstelle-ich-ein-menu-teil-2.html

      :)

      Löschen
  3. das wollte ich schon ewig wissen! danke :)

    AntwortenLöschen
  4. Dein Blog hilft mir echt immer ;)

    AntwortenLöschen
  5. tolles tut! habt ihr schon so ein tutorial gemacht wo man den postbereich und die sidebar trennt ? oder die sidebar in so einzälnde kästchen ? wär echt nützlich :S

    AntwortenLöschen
    Antworten
    1. Ja, so ein Tutorial hätte ich auch voll gerne :o :)

      Löschen
  6. Dieser Kommentar wurde vom Autor entfernt.

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

    AntwortenLöschen
  8. danke ;) Dieses tut hat mir wirklich sehr geholfen ♥

    AntwortenLöschen
  9. hab ich überhaupt nicht verstanden.

    AntwortenLöschen
  10. DANKE! endlich!
    http://karie-xo.blogspot.com/

    AntwortenLöschen
  11. Danke für deine supertollen Tutorials, diese haben mir schon oft geholfen.
    Gibt es denn ein Tutorial, wie ich die einzelnen Posts farbig voneinander trennen kann?? Bzw. Wie kann man es machen, dass der Hintergrund zwischen den Post ein Stück zum Vorschein kommt, wenn das Posteingang bspw. Braun und der Hintergrund weiß ist?? (damit die Posteingang optisch voneinander getrennt sind)

    Über Hilfe würde ich mich sehr freuen!!

    AntwortenLöschen
  12. super gut. aber wie kann man diese Linie denn oben machen wie bei euch unter dem Datum?..
    will eben nix versauen bei meinem design xp
    wäre lieb, wenn ihr oder du mir die antwort auf meinen Blog posten könntest?:*

    AntwortenLöschen
    Antworten
    1. das würde mich auch riesig interessieren! <3

      http://becca-an.blogspot.com

      Löschen
    2. Ja, darauf hätte ich auch gerne eine Antwort, habe das Tutorial dazu noch nicht gefunden.. :)

      Löschen
    3. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
    4. Ursprünglich war das ja auch meine Frage, doch dann fand ich diesen Post von euch! http://www.copypastelove.org/2011/05/posttitel-unterstreichen.html

      Löschen
  13. Könntest du vielleicht auch noch erklären, wie man diesen Kommentar Kasten von Blogger entfernt und durch ein schlichtes "Kommentare" ersetzt ?! Das fände ich wirklich unglaublich hilfreich! Liebe Grüße Marie

    http://www.phuetmarie.blogspot.com/

    AntwortenLöschen
  14. funktioniert nicht :(( was ha b ich falsch gemacht?
    som-mer-re-gen.blogspot

    AntwortenLöschen
  15. Bei mir funktioniert es nicht. Was hab ich falsch gemacht?
    http://my-urban-fashion.blogspot.com/

    AntwortenLöschen
  16. Nach ein bisschen Probieren und nach dem Suchen des richtigen "Post-Footers" hats wunderbar funktioniert. Danke :)

    AntwortenLöschen
  17. super toller blog, echt toll erklärt. ein ganz großes lob an euch!
    hab den post-footer auch sofort umgesetzt, das ergebnis seht ihr auf meinem blog:
    http://call-the-world.blogspot.de
    danke danke danke!
    ganz liebe grüße, Kim ♥

    AntwortenLöschen
  18. Ich finde kein post-footer weder änlich geschriebenes bei meinem Blog wurde keine Übereinstimmung gefunden was nun?

    AntwortenLöschen
    Antworten
    1. Bei mir auch. total dämlich...

      Löschen
    2. bei mir auch, bei mir ist zwar ein postfooter vorhanden doch nichts weiteres mehr! ich habe schon oft bemerkt das meine html oft mit dem von copypastlove nicht übereinstimmt! ;(

      Löschen
  19. danke, danke, danke!
    ihr habt mir so sehr geholfen! (:
    liebste grüße, celine ♥

    AntwortenLöschen
  20. Oh DANKE :) Habe ich total lange gesucht!

    www.amorandpsyche1.blogspot.com

    AntwortenLöschen
  21. hmm der strich ist aber zu lang bei mir...

    AntwortenLöschen
  22. Funktioniert alles :)
    Aber wie bekomm ich denn diesen ganzen Mist aus dem Footer, sodass da am Ende nur noch Kommentare steht?
    Ohne diese Button und so?
    Liebe Grüße

    AntwortenLöschen
  23. fand ich sehr gut :)
    aber du hast anstatt 'vorlage' 'layout' geschrieben, da musste ich erstmal suchen :D

    AntwortenLöschen
  24. DAAAAAAAAAAAAAAAAAAAAAANKE!!! Ich hab so ca 2000 Foren durchforstet um herauszufinden, wie man eine Trennlinie setzt ... Bin leider ein Schwammerl in html - aber mit der Step-by-Step-Erklärung hab's sogar ich geschafft :-)

    Liebstens Veronika

    AntwortenLöschen
  25. kannst du mir bitte mal erklären, wie ich den post footer finde ? Danke :)

    AntwortenLöschen
  26. super tutorial, hat mir echt geholfen:)

    AntwortenLöschen
  27. kann man irgendwie auch die länge des strichs einstellen?

    AntwortenLöschen
    Antworten
    1. ja das würde mich auch echt wahnsinnig interessieren! :D

      Löschen
  28. Also erstmal:Richtig toller Blog,der mir schon seehr weitergeholfen hat!:)
    Und jetzt habe ich noch eine Frage:Wie kann man den abstand zwischen dem Post und dem footer machen(also zwischen dem post(ende)und der Kommentaranzeige)?:-)

    AntwortenLöschen
  29. Bei mir klappt das nicht :/
    wo füge ich denn "border(...)" bei mir hier ein? :(

    .post-footer {
    margin: 20px -2px 0;
    padding: 5px 10px;

    color: $(post.footer.text.color);
    background-color: $(post.footer.background.color);
    border-bottom: 1px solid $(post.footer.border.color);

    line-height: 1.6;
    font-size: 90%;
    }

    LG <3

    AntwortenLöschen
  30. Kann mir jemand sagen, wie ich die Schriftart für den Footer ändern kann? Also das z.B. das Wort Kommentare in einer anderen Schriftart angezeigt wird, als die Standardschrift. Hab schon überall gesucht, aber nichts gefunden.

    Danke für eure Hilfe!

    LG Sunny von Stylesphere

    AntwortenLöschen
  31. Super Blog und vielen vielen Dank! :)

    AntwortenLöschen
  32. bei mir klappt es leider nicht:

    }
    .border-bottom {
    margin: 20px -2px 0;
    padding: 5px 10px;

    color: $(post.footer.text.color);
    background-color: $(post.footer.background.color);
    border-bottom: 1px solid $(post.footer.border.color);

    line-height: 1.6;
    font-size: 90%;
    }

    AntwortenLöschen
  33. Wie macht man eine Linie zwischen Postbereich und Gadgetbereich? Ich kriege es einfach nicht hin ://
    http://imsocutelol.blogspot.de/

    AntwortenLöschen
  34. danke für diesen tollen Beitrag. Ich hätte gerne noch eine zusätzliche Linie hinter dem Labels und Freigabeschaltflächen. Könntest du mir eventuell helfen? Vielen vielen Dank! :)

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

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

    AntwortenLöschen
    Antworten
    1. Zu der Frage, wie man den Strich darüber kriegt: mit border-top:...;

      Gern geschehen.

      Löschen
  37. wie kann ich es einstellen, dass der strich nur 640px lang ist ?
    Danke :)

    AntwortenLöschen
    Antworten
    1. Bei Schritt zwei gibst du dann noch dazu ein:

      width:640px;

      :)

      Löschen
  38. ihr lieben - tolle und super hilfreiche posts habt ihr!
    herzlichen dank dafür!

    allerdings bleibt eine frage:
    wenn ich auf einen kommentar beantworte / bzw. jemand anders auf einen kommentar auf meinem blog antwortet, wird automatisch eine dicke schwarze linie zwischen den kommentaren gezogen:
    http://almamyonlinemagazine.blogspot.de/2013/10/l-i-e-b-s-t-e-s-d-e-r-w-o-c-h-e-5-0.html

    wisst ihr vielleicht, wie man das beseitigen kann?
    (mein blog basiert auf dem simple template)

    herzlichen d a n k !
    alma

    AntwortenLöschen
  39. Ich würde gerne wissen, wie man das bei den Kommentaren so einstellt das es so aussieht wie bei euch.So ordentlich und umrandet =)

    AntwortenLöschen
  40. ich muss jetzt auch mal was sagen! Ich finde deine Tutorials spitzen Klasse, du bist meine beste Hilfe! Lg Rosalie

    AntwortenLöschen
  41. Ich finde schritt 1 nicht mal. :/ kann mir da bitte jemand helfen? es gibt bei mir mehrere suchereignisse, aber keines sieht so aus, wie der screenshot bzw der von ihr vorgegebene html code. bisher hatte ich bei noch keinem tutorial große probleme, aber bei dem verzweifel ich gerade.

    AntwortenLöschen
  42. kann man auch zwei striche untereinander machen? habs mal versucht einfach doppelt aber hat leider nicht geklappt :D
    www.pseud-o-nym.blogspot.de

    AntwortenLöschen
  43. Kann man anstelle des Strichs auch eine Grafik einfügen? Bin da gerade am rumprobieren, aber es wird irgendwie nichts... :-/

    AntwortenLöschen
  44. Ihr seid eine so tolle Seite, wirklich. Ihr habt mich schon so oft weitergebracht, wenn ich mal wieder total am verzweifeln war und mir nicht zu helfen wusste. Eure Anleitungen sind total verständlich und sogar für ganz Doofe - wie mich :p - gut nachzuvollziehen. Macht weiter so, ihr Lieben.

    Herzallerliebst,
    Steffi von lifeisapresent.de

    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!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.