[BLOGGER] Datum aufspalten und gestalten ✤✤✤✤✤

Hallo zusammen.
Die Frage tauchte schon sehr oft auf: "Wenn ich mehr als einen Post pro Tag veröffentliche, dann wird das Datum nur beim letzten Post angezeigt." Das ist kein Problem des Tutorials, sondern ein Blogger-Problem. Dieses Phänomen lässt sich in jeder Vorlage beobachten, meist ist es einfach nicht so auffällig, wie wenn man das Datum gestaltet hat.

Um das Problem zu beheben, habe ich jetzt eine Alternative Version meines CPL-Gastposts geschrieben. Wenn ihr nicht zu den Leuten gehört, die mehr als einen Post pro Tag veröffentlichen, dann würde ich euch das "Original" empfehlen.
Alle anderen sind jetzt herzlich eingeladen, diese Alternative Version in ihren Blog einzubauen. Eigentlich verändert sich nur der Anfang, der ganze CSS-Teil bleibt sich gleich.

CPL Post


Okay, Datum aufspalten. Endergebnis wird was in diese Richtung:

Grundidee und wie wir das Datum überall hinbekommen

Okay, damit das Datum überall angezeigt wird, müssen wir vom data-Tag: dateHeader weg und stattdessen einen Timestamp platzieren. Dieser wird im Bloggercode auch bei doppelten Post angezeigt.

Das Problem ist, dass das Timestamp-Format nicht das Datumsformat unterstützt, welches für das ursprüngliche Script gebraucht wird, deswegen musste ich das Script umschreiben.

Format ändern

Okay, das Timestamp-Format müssen wir anpassen. Und zwar machen wir das unter Einstellungen>Sprache und Formatierung>Format des Zeitstempels. Stellt sicher, dass ihr das folgende Format ausgewählt habt:

JavaScript einfügen

Ich mache das für das Tutorial im Simple Template, es funktioniert aber eigentlich mit jedem Blogger-Code, der nicht zu den Dynamic Views gehört.

Okay, wir müssen in den Code rein, weswegen ich Schwierigkeitsstufe 5 gegeben habe, weil ich weiß, dass es für viele erst einmal etwas abschreckend sein kann. Aber es gibt immer das schöne STRG+Z, das macht alles weg, was man nicht haben will ^^

Außerdem solltet ihr zu Beginn eine Sicherheitskopie machen.

Ich empfehle beim Designen immer einen Testblog, einfach damit irgendwelche Fehler und Unschönheiten ausgemerzt werden können, ehe all eure Leser das sehen ^^

Gut, wir öffnen also unseren Quelltext.





Dann sucht ihr in eurem Code nach

</head>

unter diesem schliessenden Head-Tag fügen wir unser JavaScript ein

<script> 
function replace_date(d) { 
   var da = d.split(&#39; &#39;); 
   weekday = &quot;<div class='weekday'>&quot;+da[0]+&quot;</div>&quot;; 
   month = &quot;<div class='month'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;; 
   day = &quot;<div class='day'>&quot;+da[2].slice(0,2)+&quot;</div>&quot;;
   year = &quot;<div class='year'>&quot;+da[3]+&quot;</div>&quot;; 
   document.write(month+day+year); 
} 
</script>

Im Origiginal-Tutorial habe das Script erklärt. Die Anpassung ist hier eigentlich bloss, dass wir den Wochentag ausblenden und das Komma nach dem Tag entfernen. Da der Zeitstempel das Format nicht unterstützt, muss das Script erweitert werden, doch es funktioniert noch immer gleich und spaltet das Datum in seine einzelnen Komponenten auf.

Einbau des fancy Dates

Als nächstes müssen wir dieses Script ausführen, es muss also auch aufgerufen werden. Dazu müssen wir die ursprüngliche Gestaltung des Datums (Darstellung als Heading) aufheben und unsere neue Ansicht einfügen.

Dazu sucht ihr in eurem Code nach folgendem Schnipsel. (den werdet ihr drei Mal finden)

<b:if cond='data:post.dateHeader'>

Es gibt zwei Schnipsel-Arten, die mit dieser Zeile beginnen.
Einmal:

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

und:

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

Beide Schnipsel ersetzt ihr jeweils durch folgendes:

<span class='date-header'>
    <div id='date'> 
        <script> replace_date(&#39;<data:post.timestamp/>&#39;); </script> 
    </div>
</span>

Schaut euch das in der Vorschau an, und wenn es so aussieht wie unten auf dem Bild, habt ihr alles richtig gemacht. Dann speichert ihr es. Der schwierigste Part ist geschafft.

CSS!!! (finally)

Okay, jetzt geht's endlich an die CSS. Ich hab mich wie gezeigt für einen Kreis entschieden, aber eigentlich sind euch keine Grenzen gesetzt, jetzt könnt ihr echt richtig kreativ werden.
Ihr könnt eure CSS eigentlich einfügen wie ihr wollt. Sei es im Vorlagendesigner oder in einem HTML-Gadget. Da ich meine CSS gerne beisammen habe, mache ich das im Code direkt drin, also werde ich euch das auch erklären.

Sucht nach

]]></b:skin>

Achtet bitte darauf, dass ihr eure CSS wirklich vor der eckigen Klammer einfügt. Oft
rutscht die schliessende Klammer der letzten CSS-Anweisung nach unten und euer schliessendes Skin-Tag sieht so aus:

}]]></b:skin>

Wenn ihr davor eure CSS einfügt, wird sie keine Wirkung haben, denn sie ist innerhalb einer anderen Anweisung.
Falls ihr die geschweifte Klammer habt, fügt zuerst einen Zeilenumbruch nach ihr ein und kopiert dann die CSS rein.

Über dieses Skin-Tag kopiert ihr eure CSS rein.



Das Hauptdesign machen wir mit span.date-headerund #date. Diese beiden bilden das "äußere Design". Auch die Positionierung findet hier statt.

Bisher hatte ich hier die CSS für den Kreis, da diese CSS aber ziemlich unsauber war, habe ich sie entfernt und möchte euch hier einfach meine Sammlung angeben. Verschiedene Styles, die ihr relativ einfach einfügen und dann auch personalisieren könnt.

Sammlung von verschiedenen Styles

--> Check it out!
Ich habe jetzt bei der CSS mit Kommentaren auch jede einzelne Zeile erklärt, damit die Bearbeitung so einfach wie möglich wird.

Wenn ihr die CSS eingefügt habt, seit ihr eigentlich fertig, dann könnt ihr mit der Personalisierung anfangen.

Personalize

Das ist CSS, die mit Platzierungen zutun habt. Jeder Blog hat andere Masse, funktioniert etwas anderes, also funktioniert sie nicht immer sofort perfekt. Aber mit ein klein wenig Aufwand, kann man das sehr schnell anpassen.
Was die Farben in CSS angeht: Ich habe einige in RGBA angegeben, wozu ich einen Post geschrieben habe (hier)
Und für schnelle Farbcodes, klickt mal bitte hier.

Damit ihr diesen Prozess noch einmal "live" sehen könnt, habe ich noch ein Video gemacht, in der ich den Kreis sowie das Fähnchen (das enorm viele Probleme zu verursachen scheint) einbaue und noch ein paar grössere Änderungen vornehme.

Troubleshooting

Im Video seht ihr, dass ich eigentlich alles direkt im Editor anpasse, damit die Änderungen direkt gespeichert werden. Ich empfehle das jedem, der sich seine Schritte nur schlecht merken kann und lieber auf Nummer sicher geht. Allen anderen, empfehle ich einmal CSS einzufügen, zu speichern und dann den Testblo anzugucken. Wenn ihr dan Rechtsklick auf das Element macht, könnt ihr Element untersuchen auswählen und CSS direkt bearbeiten. Sobald ihr mit den Änderungen zufrieden seid, könnt ihr die Änderungen auch im Editor übernehmen.





Okay, kommen wir zu den häufigsten Problemen.
Ich hoffe, dass das Video die Änderunge verdeutlicht und euch einen Weg zeigt, wie ihr das Problem lösen könnt, aber hier sonst auch noch in geschriebener Form.

Bei mir klappt alles, bis zum Punkt mit der CSS
Lies dir den Post noch einmal ganz genau durch. Dann siehst du dir das Video an. Ich habe alles im Originaltempo gelassen, damit man ganz genau sehen kann, was gemacht wird. Dann sollte das klappen.

Mein Datum ist zu weit aussen/innen/Abstand nach oben ist so riesig...
Da wird was mit der Positionierung nicht stimmen.
Verändere left bzw. right bzw. top-Werte. Verändere erst die Werte die vorhanden sind, ehe du eigene neue hinzufügst.

Wie kann ich die Farbe wechseln
Ersetze den Farbcode. Es funktioniert jeder Farbcode, konsultiere einmal beide links und wenn du noch mehr Informationen brauchst, hilft Onkel Google sicher, aber bei Schwierigkeitsstufe 5 erwarte ich zumindest Wissen darüber, wie man Farben ausdrückt.

Wie wechsle ich den Hintergrund vom Fähnchen
Das ist verständlich. Hier ist nicht der Background vorhanden, sondern das ist mit bodern gemacht. Jeder der mit den Fähnchen arbeitet, sollte mal meinen Triangle Mania Post lesen, ich denke danach wird es wesentlich einfacher sein, das ganze anzupassen.

Ich habe ein anderes Problem, das total seltsam ist und ich kann es einfach nicht lösen
Schreib mir! Aber zuerst: lies dir die Kommentare durch. Es sind 300+, ich habe die oben gestellten Fragen mit einigen bearbeitet und habe ganz ehrlich die Nase voll immer das gleiche zu schreiben. Wenn es wirklich ein Problem ist, das nicht banal ist kümmere ich mich gerne darum, es liegt mir am Herzen, das ihr ans Ziel kommt, aber momentan hab ich nicht genug Zeit das für jeden einzelnen zu machen.
Trotzdem versuche ich jede Email zu beantworten.

Ihr könnt mich über mein Kontaktformular anschreiben. Schickt mir einfach eure Mailadresse, eine Beschreibung des Problems und einen Link wo ich mir das Problem ansehen kann und dann schreib ich euch zurück mit meinen Vorschlägen.
Es liegt mir bei Tutorials am Herzen, dass alle die es versuchen auch zum Ergebnis kommen. Es ist eben kein einfaches Unterfangen, aber das kann man schaffen. :)