Tipps & Tutorials, tutorial

Zeile unter Posttitel stylen

Hallo Ihr Lieben,

dieser Post zeigt euch, wie ihr die Zeile unter eurem Posttitel verschönern und anpassen könnt. Wer wissen will, wie das Datum da hin kommt, sollte sich diesen Post “Datum unter Posttitel” mal durchlesen.

Beginnen wir mit dem CSS:

Zeile allgemein bearbeiten

1. Öffne Dashboard >> Vorlage >> HTML bearbeiten.

2. Sucht nach folgender Zeile: ]]></b:skin>

3. Davor gebt ihr folgendes ein – wenn ihr richtig steht, sollte die Schrift blau sein. Passt auf, dass ihr nichts vom vorherigen Teil löscht.

.post-header{}

4. Zwischen die Klammer könnt ihr folgende Properties einfügen (es gibt natürlich noch mehr, aber sie alle hier aufzuzählen wäre Wahnsinn) – dahinter steht auch die /*Erklärung*/ (die könnt ihr am Ende löschen):

background:#eee; /*Hintergrundfarbe*/
background:url(http://www.xyz.de/bild.jpg) no-repeat; /*Hintergrundbild*/
text-align:center; /*Textausrichtung*/
font-size:16px; /*Schriftgröße*/
padding:5px 5px 5px 5px; /*Abstand: Oben rechts unten links;*/

Fehlt etwas? Dann schreibt es mir und ich ergänze diese Liste. Mehr Properties + Erklärung findet ihr hier.

5. Speichern.


Einzelne Elemente abtrennen

Jetzt zeige ich euch noch, wie man die Punkte zB. mit einem “//” abtrennt. Wer nicht so sehr mit dem HTML vertraut ist, dem empfehle ich, es auf einem Testblog auszuprobieren oder davor sich einen Back Up zu machen (unter Vorlage ist rechts oben ein Back-Up Button).
 
1. Sucht in eurem HTML nach post-header. Beim zweiten Ergebnis mit <div class=’post-header’> seid ihr richtig.
 
2. Ich habe euch den Code bei unserem Beispiel eingefärbt. Der Code für die Autorenanzeige ist grün und beginnt mit <span class=’post-author vcard’> und endet bei </span>. In rot folgt die Zeitangabe, welches bei <span class=’post-timestamp’> beginnt und mit </span> endet. Seht ihr schon die Ähnlichkeit? Anhand der Klassen (class=’…’) kann man in etwa herauslesen, was dieser Teil anzeigt.
 
 
3. Habt ihr herausgefunden, wie es bei euch aufgeteilt ist? Gut, dann könnt ihr eure Trennung zwischen den </span> und <span class=’…’> einfügen (s. im Bild zwischen dem roten & gelben Teil). Ihr könnt dazwischen einfach ein Zeichen kopieren – schaut doch mal auf CopyPasteCharacter, vielleicht findet ihr dort etwas?
 
4. Speichern.
 
 
Ich wünsche euch gutes Gelingen!

49 Comments

  1. Bluetenstaub.

    3. September 2013 at 10:45

    Könntet ihr vllt auch noch erklären, wie man den Kommentarlink umbenennt, nachdem man euer oben verlinktes Tutorial mit dem Datum/Kommi unter den Posttitel verschieben gemacht hat? Weil ich habe das ausprobiert und sobald ich das Tutorial gemacht hatte, war dann zwar alles am richtigen Platz, aber es stand da wieder dieses Kommentare: …

    Eure Tutorials sind immer so toll, ich freue mich auf noch viele mehr 🙂

  2. Penny Lane

    4. September 2013 at 14:31

    Das kommt gerade zur rechten Zeit, weil ich sowas in mein neues Design einbauen möchte!

    Davon abegesehen:
    Ich plane einen kleinen Vorstellungspost von Seiten, die gute Webdesign/Tuturials/Tipps haben, und würde CPL in diesem Rahmen auch gerne vorstellen. Ist es ok, wenn ich euren Header dafür verwende (Sozusagen als Vorschaubild/Icon/Überschrift) in dem Post, damit das alles etwas anschaulicher wird.

    LG
    Moni/Penny

    1. lovemira

      4. September 2013 at 14:37

      Hey, schön dass es dir gefällt 🙂 Und klar! Du darfst dich gerne bedienen, wenn es für eine Vorstellung ist 🙂

  3. Bella Snow

    12. September 2013 at 20:35

    Funktioniert leider gar nicht bei mir 🙁

    1. lovemira

      12. September 2013 at 20:40

      Was funktioniert denn nicht?

  4. Lena

    13. September 2013 at 21:07

    Bei mir funktioniert es auch nicht 🙁

    1. lovemira

      14. September 2013 at 18:00

      Wenn ihr mir nicht sagt, was genau nicht funktioniert, dann kann ich euch nicht helfen. Erscheint dann nichts oder tut sich nichts oder wird es falsch dargestellt? Ich kann leider keine Gedanken lesen…

  5. Sophia

    16. September 2013 at 3:08

    Hey Mira, bei mir funktioniert das leider auch nicht. Da passiert gar nichts, also alles bleibt so wie es war … Hast du eine Idee, woran das liegen könnte? <3

  6. Lacerta

    20. September 2013 at 12:22

    Hey, bei mir funktioniert es auch nicht.

    ich finde diesen code: ]]> in meinen Html's nicht. Nur etwas ähnliches: —

    wenn ich jetzt einfach so weiter mache wie du es oben beschrieben hast, ändert sich nichts. Ich habe lediglich den code in meiner Navbar stehen 😉 Trotzdem danke.

    Vielleicht kannst du mal bei mir vorbei schauen? Da stehen ganz viele Fragen auf die ich keine Antwort weiß 🙁

    LG Lacerta // http://lacertasdiaries.blogspot.de

  7. Lacerta

    20. September 2013 at 14:25

    Okay jetzt hat es zwar geklappt aber bei mir ist das voll komisch verschoben, wie bekomm ich das weg? ist schwer zu erklären, musst du dir anschauen: http://lacertasdiaries.blogspot.de/
    Danke <3

    1. lovemira

      20. September 2013 at 16:20

      du hast die // falsch gesetzt. Bei dir sieht das so aus:

      < span > [Code von Kommentar] < /span> < span > // [Code vom Zeitstempel] < /span >

      Dieses // muss zwischen < /span > und < span > sein!

    2. Lacerta

      20. September 2013 at 16:42

      Oh nein, ich kapier's nicht 🙁 diese // hab ich im Layout eingefügt und nicht bei html. was heißt denn das mit dem span? (sorry kann es nicht einfügen, dann darf ich es nicht posten :()

  8. Lacerta

    20. September 2013 at 20:58

    Oh es tut mir Leid ich hab zusätzlich noch eine Frage… & zwar hab ich gesehen, dass du in deinen Posts einzelne "Überschriften" hast, die auch nochmal unterstrichen sind. Wie machst du das? Danke vorab und schönes Wochenende <3

  9. Andrea

    23. September 2013 at 11:33

    Hat super geklappt. Ich habe nur ein klitzekleines Problem. Wie kann ich die Abstände dazwischen ändern ? Bei mir sitzt der Name fast im Datum 🙂
    Schau mal hier: http://meineinzigartigblog.blogspot.de/ Danke im Vorraus….

    1. lovemira

      23. September 2013 at 21:08

      Schau mal im Post, ich habe den Code hinzugefügt 🙂

    2. Andrea

      24. September 2013 at 16:17

      Lieben Dank Mira. Es hat funktioniert. 🙂

  10. Jennifer

    24. September 2013 at 10:36

    Hallo,

    die Anleitung ist echt super, danke! Ich hab alles so eingegeben, aber trotzdem will es irgendwie nicht. Ich weiß auch nicht worans liegt. :/ Liegt es vlt an der Vorlage?
    Das ist mein Blog: http://buecherfotografie.blogspot.co.at/

  11. Camillex

    5. October 2013 at 23:22

    Bei mir tut sich da leider auch gar nichts :/

    1. lovemira

      5. October 2013 at 23:52

      Du hast auch nichts direkt unter den Posttiteln, was du gestalten kannst. Du musst den ersten Teil des Tutorials machen!

  12. Lucy Peaches

    6. October 2013 at 10:52

    Hey 🙂 Danke für die Erkäarung, aber ich habe auch diesen CSS eingefürgt und gespeichert, doch bei mir tut sich auch gar nichts. (lucypeacheslayout.blogspot.de) Also alles ist wie vorher 😮
    xo peaches <3

  13. Anonym

    6. October 2013 at 17:50

    Huhu und vielen Dank! Also ich kann das zentrieren und so. Der Code klappt. Nur leider steht außer des Autors alles andere nicht mit oben. Im Blogpost bearbeiten unter layout habe ich schon alles so angeordnet, dass es eigentlicht oben ist, aber das ist es trotz speichern nicht… Hast du eine Idee?

    http://www.mamahoch2.de

    LG Bianca

    1. lovemira

      6. October 2013 at 18:13

      Am einfachsten ist da, wenn du deine Widgetvorlage vom Blog1 (unter HTML Bearbeiten) zurücksetzt. Dann werden auch Änderungen am Blog1-HTML zurückgesetzt, aber das ist ziemlich idiotensicher.

  14. Nancy D.

    10. October 2013 at 21:24

    Hey Mira 🙂
    Das Tutorial ist super und es hat auch fast komplett geklappt, aber ich schaffe es irgendwie nicht, die einzelnen Sachen mit so einem Strich | zu trennen…Ich hab auch noch mal überprüft, ob ich es an der richtigen Stelle gesetzt habe, aber es sieht genauso aus, wie auf deinem Bild 🙁
    Danke schon mal (:
    Alles Liebe, Nancy x
    Das ist mein Blog: http://booksarehiddenworlds.blogspot.de/

    1. katiy

      13. October 2013 at 20:37

      ich hab das gleiche problem, kann es auch nicht trennen 🙁
      und kann man die schriftart auch noch ändern und dieses "um" vor dem datum wegbekommen?
      hoffe du kannst mir helfen, es sieht im moment echt nicht schön aus (katiys.blogspot.de)
      danke schonmal und ganz liebe grüße!:)

  15. Sarah N aus K

    14. October 2013 at 9:53

    Hallo Mira, also bei mir geht es auch nicht, cih setzte die Sachen immer zwischen span> und </span, allerdings erscheint das bei mir nicht in der Vorschau und dann auch nicht im Blog. Außerdem sitzen die "Sachen" immer in 2 Zeilen, statt in einer O.o
    Irgendwie doof.

  16. Marie

    21. October 2013 at 20:35

    Huhu Mira 🙂
    Mit Margin-top und so bin ich meinem Ziel schon ganz nahe gekommen. (ich wollte einfach nur ein Bild unter den Posttitel legen, also nicht das ganze Tutorial übernehmen)

    Ich habe aber das Problem, dass der Titeltext immer noch in der Blog-üblichen Linkfarbe erscheint, obwohl ich schon: font-color: #000000 stehen habe. Irgendwie ignoriert der die neue Farbgebung. auch wenn ich !important dahinter schreibe. Hast du eine Lösung?

    Die meisten anderen Tutorials im Internet hatten komplett anders aussehende Codes. Speziell direkt beim H3-Teil. Nach der Umstellung auf die neue Vorlage finde ich die meisten Codes nicht mehr, auch wenn ich IM Code suche…

    Liebe Grüße!
    Eure Tutorials sind Lebensretter, wenn man -wie ich- 0 Ahnung vom Coden hat…

    1. Von Mri

      22. October 2013 at 17:10

      Nachdem ich bestimmt 3 Tage gesucht hatte bevor ich gestern die Frage gestellt habe, heute die Antwort:
      Suchen: a:link {
      text-decoration:none;
      color: $(link.color);
      }

      Darunter einfügen:
      h3.post-title a:link{
      text-decoration:none;
      color: #00ff00;
      }

      h3.post-title a:visited{
      text-decoration:none;
      color: #00ff00;
      }

      Gefunden auf: http://productforums.google.com/forum/#!topic/blogger-de/wZAwL6pRw_k

      Hat das eeeewig gedauert…

  17. Anonym

    25. October 2013 at 19:48

    Hey bei mir tut sich leider auch nichts. Also hab den Strich zwischen dem eingefügt was du gesagt hast aber man sieht nichts 🙁
    Woran kann das liegen ?

  18. Lacerta

    3. November 2013 at 18:46

    Hey Mira, ich wollte fragen, ob du mir meine Frage, doch noch beantworten könntest, die ich im September mal gepostet hatte??

    Oh es tut mir Leid ich hab zusätzlich noch eine Frage… & zwar hab ich gesehen, dass du in deinen Posts einzelne "Überschriften" hast, die auch nochmal unterstrichen sind. Wie machst du das? Danke vorab und schönes Wochenende <3

    Wäre super Lieb.. vielen Dank :-*

  19. natur-allein

    29. December 2013 at 20:04

    Bei mir klappt es leider nicht. Und es ist seltsam… ich habe auch andere Tutorials von euch gemacht, die ich alle super fand. Und alle funktionierten bis zu dem Zeitpunkt als ich diese Kategorien unter meinen Header festlegte mit html usw. Plötzlich klappte sah man die Datums-bubble nicht mehr und auch einige andere Dinge waren weg. Woran kann das liegen?

  20. farbklecks

    1. January 2014 at 20:28

    Nachdem ich seit zwei Tagen leicht verzweifelt aufgegeben habe, habe ich es nun endlich geschafft. Der Grund: Falsch gelesen. Jetzt hat es aber alles geklappt & dank eurer Tutorials hat mein Blog ein neues Design (:
    http://bluemchenmohn.blogspot.de/

  21. Michelle Früh

    3. January 2014 at 21:53

    Danke, es hat geklappt. Ihr seit super:)
    Alles Liebe
    Michelle

  22. Josie Papaya

    14. January 2014 at 19:50

    Die einzelnen Elemente bei mir abtrennen funktioniert, aber die Zeile allgemein ausrichten funktioniert bei mir nicht.
    Ich benutze das "Einfach"-Template von Blogger.
    Wenn ich das Tutorial durchführe funktioniert es nicht, sowieso funktioniert nie etwas, wenn ich dies über ]]> einfügen müsste.
    Gibt es da irgendwie eine andere Lösung?

    LG Josie ❤︎

    1. lovemira

      16. January 2014 at 22:27

      Hallo Josie, wenn du Probleme hast, das CSS einzufügen, dann mach das einfach so:
      Füge vor </body> folgendes ein:
      <style>…</style>

      Dazwischen (also statt den …) kommt dann das CSS rein, was normalerweise über ]]> kommt. Sollte so auch funktionieren 🙂

      Liebe Grüße, Mira

    2. Josie Papaya

      19. January 2014 at 14:06

      Funktioniert leider immernoch nicht 🙁

  23. Doris Weber

    12. February 2014 at 19:49

    Juhuuu,es hat geklappt 😀 DANKE für das coole Tutorial! Ich werd jetzt mal nach und nach mein Design etwas anpassen – deine Tipps sind da sehr hilfreich 🙂

    Alles Liebe
    Doris von
    Pretty Clover Beautyblog

  24. FullmoonShadow

    1. March 2014 at 13:57

    Hey! Der erste Teil von diesem Tutorial hat bei mir super funktioniert, war auch sehr leicht, weil das echt super erklärt wurde.
    Leider funktioniert die Abtrennung bei mir nicht. Ich habe das eigentlich so gemacht, wie du es oben geschrieben hast, aber irgendwas muss ich wohl doch falsch gemacht haben. ^^''

    Mein Bloglink ist: http://wenn-ein-vollmond-schatten-wirft.blogspot.de/

    Vielen Dank übrigens für die ganzen tollen Tutorials!

  25. Elli

    5. May 2014 at 11:30

    Die Anleitung ist super, nur leider fehlt bei mir der komplette Abschnitt für Post-Labels und ich weiß nicht, wie ich das dort hinein bekommen soll.
    der Anfang mit <span class='post-labels> ist klar, aber was muss da dann noch rein?

  26. Elena

    12. June 2014 at 12:23

    Liebe Mira
    Eine Frage auch von mir zu einem (glaube ich) verwandten Thema: Ich habe die Gadgets in der Sidebar unterstrichen – allerdings hat sich dadurch auch der Titel unterstrichen; mit dem Befehl border: none; geht er leider auch nicht weg (auch nicht mit border-bottom oder border-top) – eine Idee, wie es es anstellen könnte?
    Und welche Frage mir am wichtigsten ist und ich einfach nirgends ins Antwort finde: Ist es möglich, sie Leiste mit den einzelnen Seiten (welche bei mir unterm header ist) über die gesamte Breite des Bildschirms anzuzeigen?? (Bsp: http://stout-blogger.blogspot.ch oder wie bei euch oben der schwarze Balken) ??? Ganz lieben Dank :))

  27. Dalila Living

    22. September 2014 at 12:34

    Hey, ich weiß, dass hier lange nichts passiert ist, aber vielleicht kann mir hier jemand helfen. Bei mir hat alles super funktioniert, ich habe zwei Symbole eingefügt, die ich wollte. Das Problem ist bloß, dass ich in meiner Navigation auf Seiten verlinke (About, FAQ, etc) und nun auf diesen Seiten oben auch diese beiden Symbole auftauchen. Weiß jemand, wie ich den Code formulieren muss, damit das nicht mehr passiert?

    http://dalilaliving.blogspot.de/p/about-me.html

  28. Tina

    6. November 2014 at 21:30

    Hallo Mira!
    Ich finde diese Art der Gestaltung des Post-Titels so schön und würde es auch sehr gerne in meine neues Blogdesign einbauen, nur leider finde ich noch nicht einmal diesen Code ]]> in meiner HTML Vorlage 🙁
    Sehr schade… Wüsstest du vielleicht, wie ich dieses Problem beheben könnte/Was ich falsch gemacht habe?
    Danke schon einmal im Voraus.

    Liebe Grüße,
    Tina
    http://seifenblasentraeumereien.blogspot.de/

    1. Tina

      6. November 2014 at 21:32

      * ]]>
      natürlich meinte ich den Code…

  29. Anonym

    22. February 2015 at 19:25

    .post-header{
    background:#EAFFEA;
    background:url() no-repeat;
    text-align:center;
    font-size:16px;

    Funktioniert bei mir auch gar nicht. Keine Hintergrundfarbe, nichts. Zentriert ist es zwar schon, aber die Hintergrundfarbe bleibt transparent.

    Die // Abschnitte gehen auch nicht, trotz dass sie passend gesetzt wurden. Aber das ist nicht so schlimm. Wichtiger wäre mir oben die Hintergrundfarbe. Falls es dazu bereits eine Lösung gibt, wäre ich dankbar. 😉

  30. Eva Leick

    22. February 2015 at 23:07

    leider bekomme ich das datum nicht zentriert …und auch die Abtrennung bekomme ich nicht hin:(

    wäre super lieb wenn du helfen könntest

    liebst,
    Eva von lecallofbeauty

  31. Anonym

    18. May 2015 at 20:26

    Vielen lieben Dank für das Tutorial, bei mir sieht es nun etwas anders aus im HTML Code, die Abstände und Leerzeichen musste ich etwas verändern, um es zentrieren zu können, aber letztendlich hat es super funktioniert.
    Dankeschön <3

  32. Mila

    30. August 2015 at 16:41

    Das Tutorial ist echt gut, nur leider funktioniert bei mir das mit dem Abtrennen nicht. Ich habe die Abtrennungen eingefügt und bin dann auf "Vorschau" gegangen und dann war alles wie vorher.

    Wäre toll, wenn du das nochmal erklären könntest :). Dankeschön :).

    Liebe Grüße
    Mila

    http://dashausderbuntenbuecher.blogspot.de/

    1. Mila

      2. September 2015 at 9:44

      Okay, es geht jetzt. Ich habs an der falschen Stelle einfügen wollen 😀 Nur jetzt sitzt halt der Zeitstempel so auf den Abtrennungen drauf…

    2. Mila

      2. September 2015 at 13:31

      Okay, da habe ich jetzt auch eine Lösung gefunden :). Tut mir leid, dass ich immer nerv 😛

      Eure Tutorials sind megahammerspitzegut!

Leave a Reply