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!

50 50 Kommentare

  1. 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 :)

    AntwortenLöschen
  2. 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

    AntwortenLöschen
    Antworten
    1. Hey, schön dass es dir gefällt :) Und klar! Du darfst dich gerne bedienen, wenn es für eine Vorstellung ist :)

      Löschen
  3. Funktioniert leider gar nicht bei mir :(

    AntwortenLöschen
  4. Bei mir funktioniert es auch nicht :(

    AntwortenLöschen
    Antworten
    1. 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...

      Löschen
  5. 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

    AntwortenLöschen
  6. 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

    AntwortenLöschen
  7. 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

    AntwortenLöschen
    Antworten
    1. 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!

      Löschen
    2. 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 :()

      Löschen
  8. 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

    AntwortenLöschen
  9. 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....

    AntwortenLöschen
  10. 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/

    AntwortenLöschen
  11. Bei mir tut sich da leider auch gar nichts :/

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

      Löschen
  12. 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 :o
    xo peaches <3

    AntwortenLöschen
  13. 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?

    www.mamahoch2.de

    LG Bianca

    AntwortenLöschen
    Antworten
    1. 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.

      Löschen
  14. 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/

    AntwortenLöschen
    Antworten
    1. 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!:)

      Löschen
  15. 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.

    AntwortenLöschen
  16. 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...

    AntwortenLöschen
    Antworten
    1. 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...

      Löschen
  17. 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 ?

    AntwortenLöschen
  18. 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 :-*

    AntwortenLöschen
  19. 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?

    AntwortenLöschen
  20. 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/

    AntwortenLöschen
  21. Danke, es hat geklappt. Ihr seit super:)
    Alles Liebe
    Michelle

    AntwortenLöschen
  22. 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 ❤︎

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
    2. Funktioniert leider immernoch nicht :(

      Löschen
  23. Juhuuu,es hat geklappt :-D 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

    AntwortenLöschen
  24. 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!

    AntwortenLöschen
  25. 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?

    AntwortenLöschen
  26. 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 :))

    AntwortenLöschen
  27. 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

    AntwortenLöschen
  28. 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/

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

    AntwortenLöschen
  30. .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. ;)

    AntwortenLöschen
  31. 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

    AntwortenLöschen
  32. 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

    AntwortenLöschen
  33. 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/

    AntwortenLöschen
    Antworten
    1. Okay, es geht jetzt. Ich habs an der falschen Stelle einfügen wollen :D Nur jetzt sitzt halt der Zeitstempel so auf den Abtrennungen drauf...

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

      Eure Tutorials sind megahammerspitzegut!

      Lö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.