Datum aufspalten & gestalten

***UPDATE***
Bitte beachtet die Änderungen, ich habe den ganzen Teil ab CSS angepasst!

Also, ich bin Myri und mittlerweile kennt ihr mich vielleicht, ich bin die, die immer wieder die Tutorials schreibt, die Leute zur Verzweiflung bringen... aber ich helf auch ganz gern bei Problemem aus ^^
In diesem Tutorial geht es darum das Datum spannender zu gestalten.

Da ich in letzter Zeit mit Mails zu diesem Thema bombardiert wurde dachte ich, dass ich mir eine Menge Arbeit spare, wenn ich diesem Tutorial hier ein Makeover verpasse. Ich weiss nicht, ob ich einfach so undeutlich schreibe, oder einfach nicht genau genug gelesen wird. Um beidem entgegen zu wirken, werde ich jetzt versuchen genauer zu schreiben, ich bitte euch aber auch genau zu lesen. Nicht, dass ich es all denen vorwerfe, die es nicht schaffen, es ist kein einfaches Unterfangen, wenn man sich nicht mit Code auskennt, aber es lässt sich viel vermeiden, wenn man genau liest und versucht zu verstehen, was man da genau macht.
Genug gelabert, lasst uns loslegen.
Die CSS wurde übrigens auch noch angepasst, damit die Positionierung einfacher wird.

Das grösste Problem bei Blogger war für mich immer, dass das Datum einfach langweilig wirkte. Ich hab verschiedene Dinge versucht um das Ganze irgendwie spannender zu gestalten, es unterhalb des Titels platziert etc. aber es sah alles immernoch nicht spannend genug aus.
Wordpress-Blogs hatten zum Teil einfach immer schönere Datumsanzeigen. Das lag daran, dass bei diesen Blogs das Datum nicht als Einheit betrachtet wird, sondern jede Komponente einzeln. Also als Monat, Datum und Jahr.

Vor einiger Zeit fand ich dann ein Script welches genau das tat. Das Datum aufspalten. Als ich das zum ersten Mal in die Tat umgesetzt habe, ist folgendes dabei herausgekommen:


Wie ihr das hinbekommt, werde ich in diesem Tutorial erklären.

1. JavaScript einfügen

Ich mache das anhand des Simple Templates, es funktioniert aber mit jeder Vorlage von Blogger, abgesehen von den Dynamic Views, aber das sollte klar sein.



Okay, für dieses Tutorial müssen wir 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 JavaScropt ein

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

Da ich immer Probleme habe, mit Codes die ich nicht versthe, habe ich euch im folgenden das Script erklärt, damit ihr wisst, was genau da passiert.

Javascript	Erklärung
<script>	Einleiten des Script
function replace_date(d)	Funktion "replace Date", also ersetze Datum wird eingeleitet
{
var da = d.split(' ');	Datum wird in Einzelteile aufgeteilt
month = "<div class='month'>"+da[1].slice(0,3)+"</div>";	Monat wird aus Position 1 des ursprünglichen Datums entnommen | .slice(0,3) die 3 bedeutet, dass nur die ersten drei Zeichen des Monats angezeigt werden. Wenn ihr immer den vollständigen Monat anzeigen wollt, müsstet ihr die drei durch eine neun ersetzen.
day = "<div class='day'>"+da[0]+"</div>";	Tag wird aus Pos. 0 entnommen
year = "<div class='year'>"+da[2]+"</div>";	Jahr aus Pos. 2
document.write(month+day+year);	Am Ende folgt Monat, Tag, Jahr in dieser Reihenfolge.
}
</script>

Des Weiteren fügt das Script um jeden Teil des Datums div-Elemente mit Klassen ein. Diese Klassen brauchen wir dann später um die einzelnen Teile zu gestalten.

2. 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 zwei Mal finden)

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

und ersetzt dann beim ersten Suchergebnis (wenn ihr ganz oben mit der Suche begonnen habt) folgendes Schnipsel

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

durch

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

und unterhalb des zweiten Ergebnis ersetzt ihr:

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

durch das gleiche wie eben also:

 <span class='date-header'>
<div id='date'> 
<script>  replace_date(&#39;<data:post.dateHeader/>&#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.

3. Behebung Datumsformat

Vielleicht schaut euer Ergebnis ein kleines bisschen anders aus? Das liegt wahrscheinlich daran, dass ihr ein anderes Datumsformat verwendet.
Ich hatte hier schon im Default die Version ohne Punkt und Wochentag drin, aber ich würde euch die auf jeden Fall empfehlen. Das Datumsformat ändert ihr folgendermaßen:

1. Geht auf Layout und dann auf "Bearbeiten" unter "Blogsposts".
2. Unter "Optionen für Postseite" könnt ihr den Datumsfomat ändern (siehe Bild).

Dann sollte euer Ergebnis wie das von eben aussehen.

4. 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.

Es hat alles funktioniert, aber wenn ich mehr als einen Post pro Tag veröffentliche, ist das Datum immer nur beim obersten da
Das ist ein Blogger-Problem, das auch in normalen Vorlagen der Fall ist. Wenn du deswegen aber nicht auf das Datumsstyling verzichten möchtest, dann musst du das nicht tun, sondern nur mein alternatives Tutorial hier befolgen. Dort eine Version, die bei jedem Post angezeigt wird.

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

11.05.2014 /// letztes Update von Myri