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