Be KreaTief

[BLOGGER] Date Under Post Title ✤✤

Edit: Da es nun schon eine Weile her ist, seit dieser Post on kam und er in letzter Zeit doch immer öfter angeklickt wurde (und immer wieder mal mitgeteilt wurde, dass es nicht mehr richtig klappt, hab ich den Post nun komplett überarbeitet. Jetzt sollte es eig. wieder problemlos klappen.


Edit It's been a while since I wrote this post. In the meantime the editor has changed and some problems have been reported. I did rewrite the whole post, so now everything should work perfectly fine

Hallo :)
So, heute befördern wir unser Datum von oberhalb des Posts, zu unterhalb. :D Und dann gibt's noch ne schöne Linie obendrüber.

Hello
Today I wanna show you how to move the date from above the posttitle to underneath. And then we're adding a line over it.





Okay, wie kriegen wir das hin?

Zu Beginn müssen wir ins HTML.
Dort suchen wir nach

Okay, first go to the html and search for:
<b:if cond='data:post.dateHeader'>

Das ist die erste Zeile eines Absatzes, der folgendermassen aussieht.

That's the first line of a paragraph that looks like this.

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Diesen löscht ihr nun.
Cut that whole paragraph.

Als nächstes sucht ihr nach:
Now search for this:

<div class='post-header'>
Diese Zeile werdet ihr zwei Mal finden. Ihr braucht das Ergebnis, das weiter unten im Code ist, also das zweite.
You're gonna find this line twice. You want the one closer to the end, so the second one.

Oberhalb dieser Zeile, fügt ihr nun den Absatz ein, den wir eben gelöscht haben, also:
Above that line you're gonna paste the paragraph we cut out before.

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>



Speichern und dann sollte das Datum unterhalb des Posttitels stehen.

Save and then your date should be unter the post title



CSS

Wenn euch das einfach so gefällt, dann lasst ihr das so, wollt ihr die Linie wie ich sie habte, folgt nun die CSS. Diese einfach in den Vorlagendesigner einfügen, oder im HTML direkt oberhalb von

If you like it plain, just leave it there. But if you want to add a double line, like I did, that's the CSS I used. Just copy it into the template designer or in the HTML above

]]></b:skin>

Die CSS unterstreicht den Post-Titel auf der ganzen Breite, das Datum ist 80px vom rechten Rand entfernt.

the CSS gives you a line below the post title over the full width. The date starts 80px from the right.

.date-header{
   border-top: 3px double #d3d9d8;
   width: 100%;
   text-indent: 80px;
}

Und das war's schon. :)

And that's it. :)
edit

10 comments:

  1. Sehr interessant, danke dafür.

    ReplyDelete
  2. Ööh, bei mir steht das Datum jetzt irgendwie zweimal da..

    ReplyDelete
    Replies
    1. Bei mir auch, würde gerne wissen wie das weg geht. :)

      Delete
  3. Wie kann ich's wieder rückgängig machen ? ôo

    ReplyDelete
    Replies
    1. Rückwärts lösen?
      Oder Vorlage neu laden.

      Delete
  4. Achso ok. Eine Frage hab ich da aber noch. Ich benutze jetzt eine simple Vorlage - hab nur das mit dem doppelten Strich über dem Datum hinbekommen - da ich dieses Datum unter Posttitel nicht hinbekomm ôo
    Bei der anderen Vorlage hatte es geklappt :/ Nun möcht ich aber auf jedenfall das Datum mit den strichen mittig haben, aber das eingeben von "center" wo du "right" stehen hast ... bringt nichts ôo
    Kannst du mir helfen ? :x

    ReplyDelete
  5. Huhu, danke für die tollen Tutorials. Ich habe noch nicht versucht einzelne Labels als Seite zu gestalten, ich fürchte, ich bekomme das nicht hin. Auch hier habe ich versucht das Tutorial umzusetzen, aber nun wird mir gar kein Datum mehr angezeigt :(

    ReplyDelete
  6. Dankeschön!!! <3

    ReplyDelete
  7. mir wird auch kein Datum angezeigt? Hab alles genau gemacht, wie du es geschrieben hast!

    Gruß

    ReplyDelete
  8. Hello! Thank you for this wonderful tutorial! It worked like a charm on my blog. :-)

    I would like to make a correction to your post, though ... if I may? :-)

    In the instruction where we need to 'delete' the code, it is better to say 'cut' rather than 'delete'. (esp. when it's pasted in a different location). English speakers might find it a bit confusing. :-)

    Thanks again for this wonderful tutorial!

    Liebe Grüße,
    Rosa

    ReplyDelete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered