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.

JavascriptErklä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

362 362 Kommentare

  1. Echt super hammer mäßiges Tutorial! *-*' Weiter so! <:

    AntwortenLöschen
  2. werde ich bestimmt bald mal machen. ich finde es gut wie du es erklärt hast.
    vor allem den ersten teil
    LG Mary

    http://rosenmeerkind.blogspot.com

    AntwortenLöschen
  3. Hmm, bei mir gibt's jetzt irgendwie doch ein Problem ... :/ Alles klappt bis zum CSS Code, wie du es beschrieben hast, aber sobald ich den einfüge sieht man das Datum überhaupt nicht mehr. :(

    AntwortenLöschen
    Antworten
    1. Hmm...
      Wo hast du ihn reinkopiert? Im HTML?
      Das Script hat geklappt?
      Kannst du mir vielleicht sonst noch den Link schicken, damit ich's mir anschaun kann?

      Eine Möglichkeit um den Fehler zu finden wäre es, wenn du die ganze CSS aufteilst.
      Fang mit der Positionierung an ( } dann nicht vergessen) und schaus dir dann mal an.

      Löschen
    2. Ich hab's am Anfang in vor dem ]]> eingefügt und da hat's nicht funktioniert, also habe ich es später nochmal in den CSS-Teil vom Vorlagendesigner, wo es ebenfalls nicht mehr angezeigt wurde. Komischerweise wurde das Datum angezeigt als ich vor dem span.date-header{ einen Punkt gesetzt habe, aber da hat er auch nur das angezeigt, was bei dem date { drindstand. Es sah also ganz normal aus, Tag, Monat & Jahr in einzelnen Zeilen und es war zentriert. Aber Farbe etc. hat nicht funktioniert ...

      Löschen
    3. Magst du mir vielleicht eine Mail schreiben und dann klären wir das dort?
      Ich möchte meine Mailadresse nicht hier schreiben, aber ich habe ein Kontaktformular (runter scrollen)
      Dat kriegen wir schon noch hin ^^

      Löschen
    4. Bei mir funktioniert es bei der CSS auch nicht ganz. Die Datumsanzeige verändert sich leider gar nicht..

      Löschen
    5. Welche Vorlage benutzt du?
      Schreib mir auch mal, ich seh was ich machen kann.
      Hab den Post nochmal gecheckt. Ist alles mit meinem funktionierenden Code identisch...

      Löschen
    6. Huhu,
      habs mir nochmal angeschaut und den Fehler gefunden! Eigentlich ein ziemlich dummer Fehler :P
      Ich habe 2x span.date-headerund #date gehabt, weil ich es zuerst eingefügt habe und dann nochmal deine CSS Version die ich bei den Werten abgeändert habe. Hab jetzt das span.date-headerund #date rausgenommen, sodass es nur einmal vorhanden ist und es hat geklappt :)
      Vielen Dank für das Tutorial! ♥

      Löschen
    7. Yeah! Das freut mich echt total! Schön, dass du es geschafft hast! :D

      Löschen
  4. Huhu!
    danke das du ein Tutorial zu meiner Frage gemacht hast! Hat mir sehr weitergeholfen!! Danke :)
    Liebe Grüße Fentry (:

    AntwortenLöschen
  5. Tolles Tutorial, muss ich dieses Wochenende gleich mal probieren :-)

    xoxo Pakize

    Madame Keke

    AntwortenLöschen
  6. Vielen Dank!
    Ich werde es gleich mal ausprobieren!
    Liebste Grüße, Lauré

    AntwortenLöschen
  7. Mal wieder eine super-tolle Anleitung =)!

    AntwortenLöschen
  8. Bei mir wird das Datum auch gar nicht angezeigt am Ende :(

    AntwortenLöschen
    Antworten
    1. Okay, ich muss mir das definitiv nochmal ansehen. Ich probier's mal selbst nochmal so aus, wie ich's aufgeschrieben habe (kopier mal direkt raus) vielleicht find ich den Fehler dann selbst. Kann doch nicht sein!
      *nervtmichgrad*

      Löschen
    2. Okay, hab dafür extra nen Blog erstellt und es ist alles da.
      http://blabalabebgjggsgsdfg.blogspot.ch/ <--- falls wer nachguggen will.

      Also entweder ihr habt irgendwie was falsch kopiert, eine seltsame Vorlage, oder irgendein anderer Fehler, den ich jetzt nicht vorhersehen kann. Tut mir leid, ne allgemeingültige Antwort kann ich nicht geben, weil ich das Problem nicht sehe...

      Löschen
  9. Der Hammer! Genau so was habe ich ewig gesucht und niemand konnte mir helfen!

    Vielen Dank!

    AntwortenLöschen
  10. leider bekomme ich beim CSS ein Fehlermeldung:( und zwar folgende : Ungültige Variablenangabe in Seitendesign: Variable wird verwendet, ist aber nicht definiert. Eingabe: date.header.background.color

    Error 500

    leider kenneich mich überhaupt nicht aus:( für Hilfe wäre ich echt dankbar...habe auch noch nicht weiter gemacht nach dem CSS...

    LG

    AntwortenLöschen
    Antworten
    1. Kein Problem, das ist schnell behoben.
      Die Variable date.header.span ist einfach nur für den Vorlagendesigner, das man dort eine Farbe definiert. Wenn die bei dir nicht drin ist, dann ist das nicht weiter schlimm. Du musst bloss das $(date.header.background.color) durch einen Farbcode ersetzen.

      Hoffe das hilft weiter. Sonst einfach nochmals fragen.

      Es scheint eindeutig schwerer zu sein, als ich gedacht habe...

      Löschen
    2. Also jetzt hats geklappt, kein Fehlercode mehr....aber jetzt hab ich gar kein Datum mehr xD....ich glaub ich bin zu doof, eigentlich hast du ja alles supi erklärt.....menno-.-

      Löschen
    3. Ich frag mich echt was für ein Fluch auf euer aller Blogs liegt. Ich hab extra nen neuen gemacht dafür.
      Was benutzt du denn für ein Template. Ich kann mir wirklich nicht erklären, was bei euch allen los ist, dass das nicht klappen will.
      Auch dir kann ich nichts weiter anbieten als über mein Kontaktformular(irgendwo in den Kommentaren schonmal verlinkt) mal kurz einen Link zu schicken und deine Mailadresse, dann schreib ich dir und wir schauens uns kurz an.

      Löschen
    4. ach das wäre echt super!Vielen Dank!

      Löschen
  11. Ein super Tutorial!!!
    Ich finde es toll, wie ihr auf die "kleinen Geheimnisse" der Bloggerwelt eingeht.
    Großes Kompliment! <3

    Glg
    dannie

    AntwortenLöschen
  12. Sehr tolles Tutorial! Danke vielmals für die simple Anleitung!

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

    AntwortenLöschen
  14. Ui das muss ich bald mal ausprobieren :)

    AntwortenLöschen
  15. klasse sache myri
    gefällt mir
    aber.....wie ginge das bei nem......dynamischen.....
    so wie ich mir den grad angelegt habe?
    http://flo-schaunmermal.blogspot.de/
    oder geht das da nicht?
    da geht ja vieles nicht, grrrrrrr. jedenfalls wenn ich da rumwusel nicht ;-)
    nicht mal das gadget für........nach oben.... außerhalb gestellt, bekomm ich da rein.
    bin frustriert ;-(
    aber.........immer wieder sehr angetan von dem was zu hier so für uns zur verfügung stellst, lieben dank dafür.
    vermisse immer noch deinen blog, schön, dass du aber dein "lager" noch für uns offen hälst.

    ein grüßle sendet dir flo

    AntwortenLöschen
    Antworten
    1. Nein, bei den dynamischen Ansichten kann man mit HTML nicht viel ausrichten, das ganze Ding ist ein Reiner Mix aus Scripts, tut mir leid, aber da kann ich leider nicht helfen. :)

      Grüssis
      Myri

      Löschen
    2. lieben dank myri,
      na da hab ich mir wohl wieder was ausgesucht, schmunzel
      werd dann sicher "umsteigen" müssen, mist mist.

      nicht mal ne linkliste funktioniert da, EINE verlinkung nimmt er an und bei der 2. sagt er fehler beim speichern, grrrrrrrrrr

      grüßle an dich und lieben dank für die schnelle info

      flo

      Löschen
    3. Ja, es ist relativ schwer mit den DV. Ich glaub das dauert noch ein paar Jahre ehe man die wirklich brauchen kann. Vorher muss man sich entweder damit arrangieren oder eben doch zu klassisch umsteigen.. :)

      Kein Problem. Ich hatt heut überraschenderweise mehr Zeit als gedacht, also hab ich mir nen Tägchen frei genommen und häng bisschen hier rum hihi

      Grüssis

      Löschen
  16. Ich verstehe jetzt leider trotz dem Nachtrag nicht, was ich falsch gemacht habe. Für jede geöffnete Klammer ist eigentlich eine geschlossene da. :/

    AntwortenLöschen
    Antworten
    1. Ich habe jetzt auch herausgefunden, dass der Fehler definitiv im span.date-header{ Bereich sein muss ...

      Löschen
    2. Mein Angebot steht noch. Für jeden der die Fehler selbst nicht findet, hab ich mein Kontaktformular. Ich schreib dir dann ne Mail und dann können wir das klären. Ich will nicht die ganzen Kommentare vollspammen (bin schon genug dabei ^^)

      Löschen
  17. Liebe Myri,

    danke für dieses tolle Tutorial, ich hab mich gleich mit Freuden auf die Codes gestürzt und sie in meinen Blog eingefügt. Ich bin überglücklich mit dem Ergebnis, vielen Dank!
    Habe deinen "Fähnchen"-Code genommen und ihn farblich an meinen Blog angepasst. (mein-feenstaub.blogspot.de)

    Liebe Grüße
    Lisa

    AntwortenLöschen
    Antworten
    1. Gefällt mir sehr gut!
      Einen schönen Blog hast du!
      Grüsse
      Myri

      Löschen
  18. Oh wow, das ist toll - vielen Dank :)
    Ich überlege, das auch umzusetzen, mal schauen. Aber die Anleitung ist wirklich super!

    ♥ ♥ ♥
    Elske

    AntwortenLöschen
  19. Danke, danke, danke! Ich habe soooo lange auf so ein Tutorial gewartet! Ich habe es gleich an meinem Testblog ausprobiert und es funktioniert fehlerfrei! So super, ich freu mich gerade total :-*

    AntwortenLöschen
    Antworten
    1. Yeah! Noch jemand bei dem's klappt. Ich war ja gestern schon bisschen deprimiert, dass es nicht geklappt hat, bei einigen. Aber immerhin bei paarn geht's. Ist halt wirklich nicht ganz einfach, vor allem wenn man sich mit Code nicht gut auskennt. Aber ich freu mich, dass es geht! :D

      Löschen
  20. Großes Kompliment myri, schön erklärt und gut auf die fragen eingegangen. Liebe Grüsse Felix

    Hplusml.de

    AntwortenLöschen
  21. Nach einigem Rumprobieren hat es bei mir jetzt auch geklappt :)

    Danke für das tolle Tutorial :)

    JenniferJäger.com

    AntwortenLöschen
  22. Was man alles mit HTML machen kann! Wahnsinn :)

    my blog xx

    AntwortenLöschen
  23. Es hat wundervoll funktioniert jetzt pepp ich das ganze mal auf, vielen Dank für das wundervoll erklärte Tutorial Myri :)♥

    AntwortenLöschen
  24. Super lieb von dir es nochmal soooo ausführlich zu erklären! Tolles Tutorial! :)

    Die Annique von www.fashionique.de

    AntwortenLöschen
  25. super toll erklärt, hat alles einwandfrei geklappt :)
    Ich habe dennoch eine Frage und zwar wie man genau dasselbe mit den Kommentaren macht, sodass es so aussieht wie bei dem ersten Bild?

    AntwortenLöschen
    Antworten
    1. Darüf hab ich Oliver's Kommentarbubble Tutorial ausgeführt und dann einfach nur die CSS anpassen. :)

      Löschen
    2. wäre es möglich mir den Code zu schicken? Den von Oli verstehe ich leider nicht :(

      Löschen
    3. Wenn du mir deine Mailadress gibst, kann ich ihn dir schicken. (hier oder über mein Kontaktformular) :)

      Löschen
    4. das wäre super :) meine Mail ist lithemo@gmx.de

      Löschen
  26. Ich habe seit einiger zeit das Problem, dass das Datum gar nicht mehr angezeigt wird :/ Ich kann mich weder an eine Änderung des HTML-Codes noch an jegliche andere Änderungen diesbezüglich erinnern... Hat jemand eine Idee, woran das liegen könnte oder wie man das Datum wieder anzeigen lassen kann?
    Danke!
    Liebe Grüße, danni

    AntwortenLöschen
    Antworten
    1. Ich hab doch beim einen Bild das Format geändert. Kann es sein, dass du dort vielleicht aus Versehen das Häkchen nicht hast, also bei Datum allgemein jetzt. Ich hab's auch schon versehendlich entfernt.

      Löschen
    2. Das habe ich schon kontrolliert, da sind alle Häkchen gesetzt. Im HTML-Code hab ich auch schon nach irgendwelchen Stellen gesucht, die "date" oder so ausschalten könnten, habe aber nichts finden können. :/

      Löschen
    3. hmm... dann kann ich leider auch nicht helfen. Müsst ich schon deinen ganzen Code durchlesen, aber dafür hab ich momentan leider nicht genug Zeit. Tut mir leid.

      Löschen
    4. Ich habe herausgefunden, woran es lag! :) Ich hatte beim Vorlagendesigner unter "Erweitert" die Gadget-Titel auf 0px gestellt... wusste nicht, dass darin auch das Datum mit inbegriffen ist.
      Also falls jemand das gleiche Problem hat, dann überprüf mal die Einstellungen :D
      Liebe Grüße, Danni

      Löschen
  27. Irgendwie bin ich zu blöd für die Hintergrundfarbe. Ergal was ich mache, der Hintergrund bleibt immer Transparent. Sind das Hexal Codes? (das bleibt auch transparent wen ich deinen farb Code nehme.) Kannst du mir helfen?

    AntwortenLöschen
    Antworten
    1. Ok, sorry, meine Frage hat sich geklärt. Trotzdem Danke.

      Löschen
  28. Hai. :)
    Ich habe ein kleines Problem. Bei mir wird das Datum gar nicht mehr angezeigt! Wie kann ich es wieder anzeigen lassen? Bitte helft mir!!!

    AntwortenLöschen
    Antworten
    1. Lies mal meinen Nachtrag bezüglich Problemen, bitte.

      Löschen
  29. Könntet ihr vllt mal ein Tutorial machen, wie ihr das neue Gfc-Gadget gemacht habt? Das, auf dem steht wie viele Leser ihr habt.
    Ich würde mich sehr freuen ♥

    AntwortenLöschen
  30. Ganz ganz herzlichen Dank für diese Anleitung.

    Von soetwas habe ich leider gar keine Ahnung, dennoch hat die Umsetzung dank deiner Anleitung - fast - geklappt.

    www.stempel-zauber.blogspot.com

    Darf ich vielleicht eine Nachfrage stellen? Die Überschrift meines Posts-Titels ist zu weit im Datum-Fähnchen. Kann man das irgendwie beheben? Und ist es möglich, dass Datums-Fähnchen ganz an den Rand von den Posts zu setzen?

    Gern lese ich mich auch irgendwo ein - gibt es diesbezüglich etwas online nachzulesen?

    Vielen vielen Dank nochmals!

    ♥liche Grüße
    Ann Kathrin

    AntwortenLöschen
    Antworten
    1. Du hast mein zusätzliches Beispiel verwendet, welches die Abstände nicht enthielt.
      Du musst bei spam.date-header eine weiter Definition hinzufügen, um das Fähnchen nach links zu verschieben. Dafür fügst du folgende Zeile ein:

      margin-left: -100px

      Musst wahrscheinlich mehr als nur -100 eingeben, aber probier's mal damit und dann schaust du wie viel du ungefähr noch weiter verschieben willst. Hoffe das hilft dir :)

      Liebe Grüsse
      Myri

      Löschen
  31. Danke für diese tolle Anleitung!
    LG Claudia

    AntwortenLöschen
  32. Bei mir hat es leider nicht funktioniert. Das Datum wurde zwar angezeigt, allerdings ohne farbigen Kreis und auch nicht an der rechten Seite sondern mittig vom Postbereich. Schade .. ich hätte es echt gerne in meinem Blog gehabt weil es mir total gut gefällt
    genusskochen.blogspot.co.at
    *Doris

    AntwortenLöschen
  33. ich probiere schon seit tagen an diesem tutoriall rum aber bei mir klappt es einfach nicht... es ist für mich schwer, gar den anfang des ganzen zu finden und auch wenn ich im "suche fenster" den code eingebe, findet es nur den aber der rest entspricht nicht dem Javascript muster.

    aber okay, ich versuche heute das ganze noch einmal. hoffentlich klappt's

    AntwortenLöschen
  34. Tolles tutorial, bloß leider funktioniert es bei mir nicht. Ich hab die Minima vorlage, und nach schritt 2 wird bei mir nichts mehr angezeigt, also der Datumsheader ist ganz weg -.-

    AntwortenLöschen
  35. Hallo, tolles Tutorial :)
    Kann man auch anstatt einen Kreis zu definieren, ein Bild als Hintergrund einfügen? :)

    AntwortenLöschen
    Antworten
    1. Klar, du musst einfach das Attribut: "background: url(BILDLINK);" hinzufügen. Und dann kannst du border-radius sowie die alte Background-Defi und border und wahrscheinlich auch boxshadow entfernen.

      Das alles bei span.date-header. :)

      Hoffe das reicht schon als Erklärung, sonst frag einfach nochma

      Löschen
  36. Hm bei mir klappts auch nicht :-/ Aber kann das sein das das vielleicht daran liegt das ich die 'Minima' Vorlage verwende?

    Mich würde auch ein Artikel interessieren, wo man neben dem Post ein Kreis mir der Anzahl an Kommentaren sieht auch und auch darauf klicken kann um ein zu schreiben. O:-)

    AntwortenLöschen
    Antworten
    1. Bezüglich der Minima-Vorlage kann ich leider keine Auskunft geben. Kann schon sein, dass deswegen nicht klappt. Sorry, dass das nicht hilft.

      KUMMENTARBUBBLES
      Zum einen das Tutorial von Oliver ausführen, dann anstelle seiner CSS meine verwenden :D

      CSS

      .comment-link {
      display: none
      }

      bubble, .bubble:link, .bubble:visited {
      position: absolute;
      top: 103px;
      left: -80px;.
      display: block;
      width:30px;
      font-size: .7em;
      text-align: center;
      font: 'Playfair Display' !important;
      color: #f9f9f9;
      padding:10px;
      background-color: #333;
      -webkit-border-radius:100px;
      -moz-border-radius:100px;
      border-radius:100px;
      text-decoration:none;
      letter-spacing: 1px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      -webkit-box-shadow: -1px 0px 2px 1px rgba(0, 0, 0, 0.7);
      box-shadow: -1px 0px 2px 1px rgba(0, 0, 0, 0.7);
      }


      .bubble:hover{
      text-decoration:none;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      background-color: #aaa;
      color: #333;
      }

      Grüsse
      Myri

      Löschen
    2. Hallo Myri,

      also das Datum hat bei mir super geklappt, echt eine tolle Anleitung ;o)...das mit dem Kommentarbubble aber leider nicht.

      Ich habe es unter Anpassen CSS eingefügt...oder hätte ich das in der HTML machen müssen? Und wenn ja wo dann?

      Danke und liebe Grüße
      Simone

      Löschen
    3. Hast du zuerst die Schritte gemacht, die Oliver im TUtorial ausführt?
      Die wären wichtig. Meine CSS ist nicht alles was du machen musst, nur wie's dann angezeigt wird.
      Wenn du das nicht vorher machst, dann wird's nicht angezeigt.

      Löschen
    4. Hallo Myri,

      Danke für Deine Antwort. Ja habe ich...ich habe auch einmal seine CSS probiert und einmal mit Deiner...funktioniert leider beides nicht. Die Kommentare sind unten weg (wegen .comment-link {
      display: none
      })...aber ich habe keine Kommentarbubble.

      Liebe Grüße
      Simone

      Löschen
    5. Hmm...
      magst du mir das vielleicht mal zeigen?
      Ich könnt mir den Code ansehen.

      Löschen
    6. Ja klar gern, lieben Dank! Soll ich ihn Dir mailen?

      LG Simone

      Löschen
    7. Ich hab dir eine Mail geschickt an die Adresse, die ich auf deinem Blogger-Profil gefunden hab.

      Grüsse
      Myri

      Löschen
  37. Hallo (:
    Ich habe dir eine Mail geschrieben, weil das bei mir auch nicht so recht klappen will. :-O
    Ich hoffe wirklich sehr, dass du darauf eingehst.
    Ansonsten fand ich deine Tuts wirklich immer sehr gut :)

    Blu.

    AntwortenLöschen
  38. Huhu :) bei mir klappt das Tutorial grundsätzlich, nur hab ich das Problem, dass statt Januar 25 2013 das Datum angezeigt wird, immer 23 Januar 2013. Egal ob ich das Im Layout ändere... weißt du da vlt wieso :)?
    Saskia

    AntwortenLöschen
    Antworten
    1. Das müsst ich mir ansehen. Hast du einen Link für mich?

      Löschen
    2. Habe das ganze mal auf meinem testblog ausprobiert http://testblog-saskia.blogspot.de

      Löschen
    3. Magst du mir deine E-Mailadresse geben und dann klären wir das dort?

      Löschen
    4. Sehr gerne :)
      saskia.schaefer.1@googlemail.com

      Löschen
  39. Hallo Myri,

    dein Tutorial ist super und auch sehr verständlich, ich werde es jetzt dann gleich ausprobieren, nur vorher habe ich mir deinen Blog Wortgefängnisarchitektur angeschaut und ich muss sagen ... wow. Der Inhalt ist schonmal genial, aber ich war schon hin und weg, bevor ich den gelesen habe. Das Design ist sooo genial! Und wie das immer so ist, wenn andere etwas tolles haben, kommt als nächstes die Frage "Kann ich auch?"

    Mir ist klar, dass ich nicht alles auch kann/ lernen kann, aber mich würde dennoch einiges sehr interessieren und ich schreibe jetzt einfach mal ein paar Tutorialwünsche auf, vllt magst ja du oder jemand anders aus dem Cpl-Team ein Tutorial dazu schreiben. (Falls das denn umsetzbar ist)

    - Dein Suchfeld ist viel schöner als das langweilige von Blogger. Wie kann man das von Blogger anpassen/ Wo bekommt man eines wie deins her?
    - Dieses Menü, was es hier und auch auf deinem Blog gibt. Ihr habt ja schonmal eins mit Dropdown gemacht hier, aber da konnte man ja nur Links unterbringen (?) und es war ohne diese Pfeile nach unten.
    - die Sache mit dem Gfc-Gadget habe ich ja in einem anderen Kommi schon angesprochen, wobei du das ja nicht auf deinem Blog hast, sondern hier auf Cpl

    Sorry für die vielen Fragen, du/ihr müsst auch nicht alles umsetzen, ich würde mich aber sehr freuen, auf die eine oder andere Frage eine Antwort zu bekommen :)

    Lg, Lena ♥

    AntwortenLöschen
    Antworten
    1. Hallo Lena
      Dankeschön für das Lob :)

      Ich glaube mit ein paar deiner Tutorialwünschen kann ich dienen ;D

      Zum Suchfeld hab ich auf meinem zum Archiv degradierten Blog zur CSS was geschrieben und dort auch direkt Oliver's Tutorial dazu verlinkt.

      Ich weiss nicht, wie dein Englisch ist, aber ich verlink dir das Tutorial für das Menü trotzdem. Ich warn dich aber vor, es ist mehr Arbeit, als man am Anfang denkt. Ich hab's bisschen unterschätzt, aber ich bastel immernoch dran rum...

      Zu deinem dritten Punkt, möchte ich es einfach noch einmal sagen. GFC wird bald abgeschafft. "forseeable future" hiess es im Blog von Google und das bedeutet so viel wie: "Das Follower-Gadget wird es in absehbarer Zeit nicht mehr geben". Es ist nicht einmal mehr auf der Stadtseite der Gadgets. Es lohnt sich nicht über diese Seite noch mehr Leser zu sammeln, sondern die Werbetrommel für Alternativen zu rühren.

      Liebe Grüsse
      Myri

      Löschen
    2. Vielen Dank für deine ausführliche Antwort, dann werde ich mal ein bisschen rumbasteln ;)

      Löschen
  40. Hey :D
    Das Tutorial hat bei mir geklappt!
    Bin auch total happy aber wie hast du denn diesen zweiten Kreis (auf dem allerersten Bild) hinbekommen wenn ich fragen darf!?
    GLG Sarah --> http://saarah-die-bloggerin.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Schau mal die Kommentare durch. Irgendwo steht's :D

      Löschen
  41. Hat toll funktioniert...Danke für die Anleitung :)

    LG Simone

    AntwortenLöschen
  42. Euer Blog ist echt der Hammer!! *-*
    Macht weiter so :)

    AntwortenLöschen
  43. Ich hab das mit den Fähnchen ausprobiert und....ES SIEHT SO TOLL AUS!!! Danke danke danke :-*

    AntwortenLöschen
  44. Sobald ich das CSS einbinde funktioniert es nicht mehr :(

    AntwortenLöschen
    Antworten
    1. Ich hab gemerkt dass es bei mir funktioniert wenn ich span.date-header auslasse. Wenn ich es wieder einfüge verschwindet das ganze Datum :/

      Löschen
    2. Schreib mir mal ne Mail an myri@fantasymail.de und versuch mir mal ganz genau zu erklären was du gemacht hast. Vielleicht komm ich drauf, wo der Fehler sein könnte. Sonst muss ich mir den Code ansehen.

      Löschen
    3. Okay, habe dir eine E-mail geschickt. Danke schonmal :)

      Löschen
    4. Kannst du vielleicht nochmal schicken? Irgendwie hat mein Mail heute Probleme, hab eben schon was nicht gekriegt...
      Einfach auf Mail klicken.
      Tut mir leid, hab keinen Plan was da los ist.

      Löschen
    5. Ist schon ok. Hab's dann doch irgendwie gelöst :) Danke trotzdem!

      Löschen
  45. Ich verzweifle hier ein wenig an der neuen Vorlage bei blogger... Die Suchfunktion funktioniert nicht mehr richtig und man kann sich totsuchen. :( Ich finde nicht mal "head". Hat dafür jemand eine Lösung? Das Kästchen "vollständig anzeigen" gibt's auch nicht mehr. :( Nur die blöden Pfeile. Blöd nur, wenn man nicht weiß, wo man suchen soll... HILFE!
    Bin für jede Antwort dankbar. :)

    AntwortenLöschen
    Antworten
    1. Vielen vielen Dank, da hatte ich die passende Antwort doch glatt überlesen! :)

      Löschen
  46. Da ja jetzt das neue HTML&CSS für Blogger verfügbar ist, habe ich es durch die kleinen > geöffnet und auch date header usw. gefunden. Habe ich dann den oben stehenden Code eingegeben, kam, es ist nicht verfügbar. Kann mir da irgendjemand helfen, zeigen, wie auch immer? Ich würde das so gerne machen, aber finde irgendwie keinen weg :( Danke für eure Hilfe!!

    AntwortenLöschen
    Antworten
    1. Geht mir genauso ;) Hab die Codes in die Suchfunktion eingegeben und den zweiten findet es einfach nicht :/

      Löschen
    2. Falls es um den Ersetzungsteil geht, ist es so, dass beim zweiten Mal kein h2 mehr steht, aber was dort ersetzt werden muss, ist der div-Container, der auf den zu suchenden Code folgt. Vielleicht löst das das Problem, hoffe ich zumindest. :)

      Löschen
  47. Eine super Anleitung.Nach einem Haar raufendem Abend hat es geklappt *g*
    Vielen lieben Dank dafür. Ich habe auch das Fähnchen genommen.

    AntwortenLöschen
  48. Blogger hat mal wieder was verändert. Der Quelltext sieht jetzt anders aus, ich finde z.B. nichts mehr mit "vollständige Vorlage" und wenn ich was suche, zeigt der mir immer nur eins an - da fehlen die Pfeile, um im gesamten Text mehrere Treffer mit gleichem Namen anzuzeigen.
    Kann das Tutorial daher leider nicht anwenden. :(

    AntwortenLöschen
    Antworten
    1. Du kannst das Tutorial schon noch anwenden, denn du brauchst "vollständig anzeigen" gar nicht mehr anklicken.
      Du kannst einfach mit Str + F nach dem geschlossenen head-Tag und dem anderen suchen und es wird dir angezeigt.
      Ich habs erst gestern bei mir ausprobiert :)

      Löschen
  49. Hallo,

    ich hab ein kleines Problem. Er gibt mir die Fehlermeldung: Vorschau der Vorlage konnte nicht geladen werden: Fehler beim Parsen der XML, Zeile 1953, Spalte 3: The element type "html" must be terminated by the matching end-tag "".

    Hab alles so gemacht wie beschrieben bis einschließlich Punkt2

    AntwortenLöschen
    Antworten
    1. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
    2. Ich unterstelle dir mal eine schliessende Klammer vergessen zu haben... (nicht böse verstehen, passiert mir ständig, wenn ich kopiere)
      Das Problem heisst, dass du das schliessende HTML-Tag am Ende nicht hast, was heisst, dass du eine Klammer die du eingefügt hast, nicht mehr geschlossen hast. Versuch alles rückgängig zu machen und nochmal nachzukontrollieren ob auch alles klappt. Ich hab's zwei Mal ausprobiert, ich hab also kein Klammer vergessen, aber das Problem liegt definitiv an einer offenen Klammer.

      Löschen
    3. Vielen Dank, dann werde ich mal schaun, ob ich die fehlende Klammer finde. ich habe gerade gestern gesehen, dass er /html nicht mit eingefügt hat zwischen den Gänsefüße.

      Spaßenshalber habe ich mal die Vorlage gehöffnet und bin gleich auf Vorlage ansehen gegangen, bevor ich überhaupt was gemacht habe, gibt er mir schon diese Meldung. Mal schaun, wie ich da die Klammer finden kann.

      Löschen
    4. Hab den Fehler gefunden, hab zuviel gelöscht gehabt. Daher gab er mir den body Fehler an :)

      Löschen
  50. Vielen Dank, ich habe nun alles hinbekommen.
    Mich würde nur eins interssieren, du hast beim ersten Beispiel noch einen zweiten Kreis. Würde man da auch das Tagesdatum reinbekommen?

    AntwortenLöschen
    Antworten
    1. Super :) BIn froh, dass es geklappt hat ^^

      Kannst du mir das vielleicht noch genauer erklären, ich glaub ich versteh nicht ganz was du meinst.

      Löschen
    2. Ich kann es gerne versuchen.
      Bei deinem ersten Bild ganz oben. Hast du den großen Kreis mit dem Jahr/Tag/Monat. An diesem Kreis ist noch angesetzt ein kleiner Kreis mit einer "3". Und da kommen wir dann auch schon zu meinem Anliegen. Ich würde gerne im großen Kreis. Monat/Jahr haben und in dem kleinen den Tag. Wenn es möglich wäre.

      Ich hab vorhin schon versucht zu basteln, aber so richtig bin ich da nicht vorangekommen.

      Löschen
    3. Etwa so? Link

      Kommst du mit CSS zurecht, oder soll ich dir das noch erklären?

      Löschen
    4. Ich kann es probieren. Ich habe den oberen Teil jetzt bis . year eingegeben. Wo ich aber den letzten Teil nun einfüge und was er bewirkt weiß ich nicht. Also ab span class

      Löschen
    5. Ansonsten ist alles super gelaufen. Ich danke dir für die Hilfe. Nun muss ich nur noch mein Templates ändern mit der Vorlage, die ich mir ausgesucht habe. Weiß bloss nicht, inwieweit ich die Schriftart dort ändern darf.

      Löschen
  51. Ich habe eine Frage wie man das lila zu einer anderen Farbe ändern kann? Und wenn ich das dort geht wo Hindergrundfarbe steht was ist dieses rgba (48 , 12, 94 , .8) und aus welcher Farbtabelle kann man die Codes nehmen??

    AntwortenLöschen
    Antworten
    1. Ich hab ein P.P.S hinzugefügt. Ich hoffe das beantwortet deine Frage.

      Löschen
  52. huhu! tolles tutorial! auf meinem testblog hat alles super geklappt, doch auf meinem "richtigen" blog hats nur fast geklappt.
    mein problem ist das zwischen überschrift und post ein abstand ist in dem dann das datum angezeigt wird.
    wie kann ich das ändern bzw wo ist mein fehler?
    und das mit der farbe ändern hab ich auch leider nicht verstanden.
    hier mein blog link damit du's dir vill mal anschauen kannst: http://www.have-a-l00k.blogspot.de/
    vielen dank!
    jennie

    AntwortenLöschen
    Antworten
    1. Hallo Jennie
      Der Fehler liegt nicht im Code, wenn du dir die anderen Posts ansiehst, hast du dort keine Abstände, nur im obersten Post. Ich gehe davon aus, dass da nicht sichtbarer Code drinsteckt. Vielleicht ein falsch gelöschtes Bild oder so. Bearbeite den Post mal und wechsle in die HTML-Ansicht. Wahrscheinlich hast du als erste irgendwelchen Code, der als Abstand sichtbar ist. Das könnt ich mir auf jeden Fall vorstellen, sonst ist es irgendein Bug von Blogger den ich wohl nicht beheben kann...

      Die Farbe wird durch das ersetzen des Farbcodes geändert.

      Löschen
    2. ohje stimmt. entschuldigung!
      vielen, vielen dank! :)

      Löschen
  53. 122 Kommentare und du gehst auf jede Frage hier ein...allein dafür zieh ich den Hut Myri! Weiterso! :)

    AntwortenLöschen
  54. Myri, Danke für das Tutorial :) Ich habe es nun auch probiert.
    Bei mir ist das Datum nun nur leider über dem Posttitel und darüber total viel Platz. Hast du eine Idee, an was das liegen könnte?
    http://froschgruentestblog.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Der Platz ist weg, aber das Datum trotzdem über dem Titel. Gibt es eine Möglichkeit, das zu ändern? Wenn ich mit margin top arbeite, verschiebt es nur den gesamten Post nach unten.

      Löschen
    2. Hey Madline :)
      Also wenn margin nicht funktioniert, könntest du versuchen, bei span.date-header
      position: relative;
      top: 50px; (das ist jetzt abhänigig vom Abstand)

      hinzuzufügen. Ich bin nicht sicher ob das klappt, das müsst ich schon selbst ausprobieren. Ich kann mir zwar fast nicht vorstellen, dass das mit Margin nicht geht, hast du negativ sowie positiv versucht und die Reaktionen betrachtet?
      Tut mir leid, so ganz ohne Code ist es immer schwer zu helfen. Wenn das Problem weiter auftaucht, kannst du mich auf deinen Blog einladen und ich guck mir das direkt an und schau was ich machen kann :)

      Löschen
    3. Ohh, wie lieb von dir!
      top: 50px; eingefügt und alles klappt.
      Daaaaanke!

      Löschen
  55. Ich hab wohl schon so viel an meinem Blog rumgebastelt, dass mein Code sich so verändert hat, das ich das nict machen kann :(

    AntwortenLöschen
    Antworten
    1. Das müsste also wirklich derbe sein. So grob betrachet, hast du dein Datum ja nur unter den titel geschoben, es sollte also eig. immernoch machbar sein. Falls du es probieren willst, steh ich bei Fragen auch zur Verfügung. :)

      Löschen
    2. Hey Myri,
      ich würde das schon gerne machen, aber ich finde in meinem Code nichts von dem was ich finden sollte ^^ Keine Ahnung warum :( Und ich bin leider ein noob was das alles angeht und kann nur sachen die mit Anleitung funktioniren xD

      LG Lary

      Löschen
    3. Ich hab mir mal deinen Blog angeguckt. Du hast schonmal was am Datum gemacht, oder? Weisst du noch, wo du das herhast? Vielleicht kann ich was herleiten. Sonst müsstest du mich auf deinen Blog einladen und dann kann ich mal gucken, was ich machen kann. :)

      Schreib mir deine Antwort doch bitte hier

      Löschen
  56. Also das geht bei mir (in meinem Test Blog) schonmal gar nicht da der Code nur ein einziges mal vorhanden ist, und nicht 2x :/
    Schade...

    AntwortenLöschen
    Antworten
    1. Ich meinte
      b:if cond='data:post.dateHeader'
      wurde eben leider nicht mit eingefügt iwi...

      Löschen
  57. Das Datum sieht toll aus, allerdings hört das Tutorial für mich bei auf, da diese Zeile bei mir unauffindbar ist :-/

    AntwortenLöschen
    Antworten
    1. Leider kann ich die Zeile nicht sehen.
      Wo genau geht es nicht weiter?

      Löschen
    2. Mittlerweile hab ichs rausgefunden, ich find im neuen html-Bereich nur nichts mehr über strg-f, wenn ich es in word kopiere und wieder einfüge klappt aber alles. Sehr provisorisch, aber es funzt einwandfrei ;-)

      Löschen
  58. Ich finde das Tutorial super! Mein Datum sieht man kaum und ich hab alles gemacht wie es da steht. Hab vorsichtshalber alles auf meinem Testblog gemacht und das Datum ist jetzt ganz weg. Liegt der Fehler im CSS Code?
    Mit dem Nachtrag kann ich auch nicht wirklich etwas anfangen.
    Über Hilfe würde ich mich freuen :)

    AntwortenLöschen
    Antworten
    1. Schreib mir doch auch mal bitte hier ab wann genau der Fehler aufgetaucht ist. Wenn ich das nachvollziehen kann, ist es einfacher. :)
      Ich probier zu helfen, wenn ich kann ^^

      Löschen
    2. Danke :)
      Ich hab dir ne Mail geschickt.

      Löschen
  59. Hey,
    ich wollte nun die Fahne als Datum einbinden, doch leider hängt diese nun etwas nah am Post Titel und auch am allgemeinen Text. Außerdem ist sie nicht mehr transparent sondern Vollfarbe.

    Kannst du uns vielleicht helfen?

    hier siehst du das Problem: catscupcakesco.blogspot.com

    Vielen lieben Dank.

    AntwortenLöschen
    Antworten
    1. Hast du in der Zwischenzeit eine Lösung gefunden? Die Tatsache, dass es nicht durchsichtig ist, liegt daran, dass du wohl keine rgba-Farbe angegeben hast, sondern hex.
      Und den Abstand musst du mit Verändern des Margin-Wertes auf deinen Blog anpassen.

      Löschen
  60. Oh Gott!
    Danke danke danke dafür.

    Seit ich deinen Blog gefunden habe und festgestellt hab, dass es funktioniert bin ichso :-O OMG ICH KANN sowas!

    Und immer wenn es dann funktioniert bin ich total am ausflippen vor Freude. :D

    Danke für deinen Blog!
    :-*

    AntwortenLöschen
  61. Hilfe! Ich finde das JavaScript nicht. Was muss ich jetzt machen. Ich würde so gerne mein Datum ändern ;)
    Kannst du mir helfen??

    AntwortenLöschen
    Antworten
    1. Inwiefern du findest das JavaScript nicht? Du musst doch nur Kopieren und einfügen.

      Löschen
  62. Erstmal vielen Dank für so ein super Tutorial.
    Ich hätte noch eine Frage und zwar verstehe ich nicht was du mit negativen margins meinst. Wo muss ich die denn einfügen?

    und die zweite ist, ich hätte das Datum gerne neben dem Postitel, so das es aussieht als würde das nebeneinander stehen. Auf einer Höhe. Bei mir sieht das bisschen komisch aus.

    Hier meine Blogadresse : http://verbildlicht.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Einfach die Schriftgrössen kleiner machen (font-size) und es sollt normal aussehen. :)

      Löschen
  63. Wow ihr gebt hier so viele tolle Tipps, wirklich hilfreich und einfach zu verstehen. Meine Frage - habt ihr eine Idee, wie ich den Posttitel und den Datums-header tauschen kann, ich möchte gerne dass, der Post-Titel über dem Datum steht.

    Liebe Grüße, Patricia

    AntwortenLöschen
    Antworten
    1. Da rühr ich mal die Werbetrommel für mich. Auch dazu hab ich ein Tutorial geschrieben. Findest du hier.

      Hoffe das hilft dir weiter, sonst stehe ich für Fragen zur Verfügung. :)

      Löschen
  64. Bei mir funktioniert der zweite Schritt auch nicht... es wird nichts angezeigt. Kann es daran liegen, dass ich Chrome benutze und nicht Mozilla?
    Weil komplett ist alles, es fehlt keine Klammer oder so. :)
    Alles liebe,
    Roxana

    AntwortenLöschen
  65. Hallöchen!

    Ich bin blutiger Anfänger was diese Dinge angeht, aber habe zumindest schon kleinere Dinge am Blog verändert, auch durch eure Tutorials hier.
    Jetzt wollte ich dieses mal ausprobieren, allerdings bekomme ich nur ein Ergebnis, wenn ich nach dem head-Ding, dass ich hier nicht schreiben darf :D suche, da steht aber nicht das drunter, was dort stehen sollte. Hilfe? :D Würde es so gerne mal versuchen!

    AntwortenLöschen
  66. Achje, irgendwie habe ich mein Datum jetzt umgebracht :(
    Es ist weg. Wahrscheinlich vor lauter Unkenntnis meinerseits geflüchtet und hat irgendwo Asyl in einem anderen Blog gesucht.

    Hm. Ohne Datum siehts auch nicht so verkehrt aus. Auch wenn mir das langfristig dann doch nicht so gefällt :(

    Vielleicht war das Problem, dass bei mir

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

    und

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

    vertauscht waren und das erste (bei mir dann zweite) zwei mal da war bzw. ist?

    Ohjeee... hat jemand Ahnung und kann helfen??


    Grüßle

    AntwortenLöschen
    Antworten
    1. Ach ist ja das selbe. Bei mir aber irgendwie nicht. Ich hab das noch ein drittes Mal drin.
      Wirrwarr!

      Löschen
    2. Ha! Allein geschafft :) Hat mich nur einen halben Tag gekostet ABER es funktioniert jetzt ganz toll :)

      Löschen
  67. Huhu,
    danke für dieses tolle Tutorial!! Das peppt das Desgin echt gut auf.
    LG Chia

    AntwortenLöschen
  68. hey :)
    ich habe es bei einer einfachen Vorlage mal ausprobiert und es funktioniert nicht. Er findet anfangs schon das "head" nicht. :(

    Grüsse ♥

    AntwortenLöschen
  69. Ich hab das mit dem Kreis für dir Komentare versucht, so wie du es in einem Kommentar beschrieben hast. Nur leider hat es nicht wirklich geklappt...
    Mich würde es wirklich wahnsinnig interessieren wenn ihr vielleicht einen extra Artikel darüber verfasst. :-)

    AntwortenLöschen
    Antworten
    1. Hast du dir das Tutorial angesehen, das ich verlinkt habe? Hat es damit nicht funktioniert?

      Grüsse
      Myri

      Löschen
  70. Hallo,

    Ich es super klasse, dass du sowas machst. =)

    Jetzt habe ich aber auch noch fragen.
    Bis zu CSS bin ich gekommen, doch da ist dann zwar bei mir jetzt dieser Kreis da, nur das Datum zeigt er mir nicht an??
    Hier ist ein Link zu meinem Blog, da kannst du dir das ansehen, was ich meine:
    http://die-welt-der-gedanken.blogspot.de/

    Und dann wollte ich noch fragen wie man die Hintergrundfarbe des Kreises ändert, sie ist ja jetzt lila, ich wollt sie aber ein wenig heller, aber sie soll noch transparent bleiben??

    Hoffe du kannst mir da irgendwie helfen.

    LG
    Sakura

    AntwortenLöschen
  71. Hallo,

    Ich wollt nur bescheid geben, dass ich den Fehler entdeckt habe und das Datum jetzt bei mir ganz normal erscheint und das mit der Farbe habe ich auch raus bekommen. =)
    Super klasse mit den Tutorials, das kann ich nur immer wieder loben.

    LG
    Sakura

    AntwortenLöschen
    Antworten
    1. Freut mich zu lesen. :D Schön, dass es noch geklappt hat. Schaut gut aus :)

      Grüsse
      Myri

      Löschen
  72. Manno :( Seit paar Tagen schon probiere ich es immer wieder aus aber es klappt nicht :( Ich mache alles wie du es beschrieben ast allerdings ist bei mir das Problem ich komme gar nicht erst weit! :( Ich scuhe beimHtml Editor immer nach aber den besagten h2 schnipsel finde ich nirgendswo :(

    AntwortenLöschen
    Antworten
    1. Versuch mal nur die erste Zeile zu suchen, vielleicht findest du dann das ganze Schnipsel, mit Zeilenumbrüchen hat der Editor zum Teil seine Probleme.
      Hoffe das klappt.

      Löschen
  73. Alles hat Super geklappt! Ich würde aber gerne die Schriftart vom Datum ändern, hab bisher nur immer was gefunden wie ich die farbe änder..
    Ein sehr gutes Tutorial, gut erklärt! Riesen großes Danke! :)

    http://zuckerpur.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Die Antwort ist font-family. Damit kannst du die Schriftart ändern.

      Löschen
  74. Beim Testblog enwandtfrei geklappt, beim richtigen nicht, der Kreis is da, das Datum fehlt. Mist :D

    AntwortenLöschen
    Antworten
    1. also ab dem Moment, wo ich das h2 Teil lösche verscheindet mein Datum komplett

      Löschen
    2. Du musst das h2-Teil ja auch ersetzen. Hab ich auch schonmal vergessen.

      Löschen
  75. Hallo,

    ich wollte das mit dem Datum auch ausprobieren, finde aber die entsprechende Stelle in meinem Blog nicht. Mein Blog basiert auf dem "Bildfenster". Funktioniert das da nicht? Ich finde keine Stelle mit oder "month" oder dergleichen, was mir zweigt, dass DA das Datum steht :(

    AntwortenLöschen
    Antworten
    1. Die Stelle musst du nicht finden, sondern einfügen. :)

      Löschen
    2. Also wenn sie meint "Dann sucht ihr in eurem Code nach < / head > und darunter folgt das JavaScript:"

      Steht das Script da noch nicht, sondern das was da steht muss ich unter < / head > einfügen?

      Löschen
    3. Genau. Der Titel ist ja auch: 1. JavaScript einfügen
      Die Überschrift sagt's ja eigentlich schon
      Das Script macht ja, dass das Datum aufgespalten wird, es kann also noch gar nicht dastehen, rein logisch gesehen. Deswegen ist es auch immer wichtig sich zu fragen, was Scripts bedeuten und darum habe ich es auch erklärt.

      Löschen
    4. Du bist super! In meinem Testblog hab ich es jetzt soweit.

      Nur möchte ich gerne die Schriftart ändern. Ich hab in meinem Blog für Lauftext die Arimo und für Überschriften usw. die Dancing Script. Die Schrift auf Arimo zu ändern funktioniert aber Dancing Script nimmt es mir nicht. Vielleicht siehts ja auch blöd aus, aber ich würds zumindest gerne probieren! Oder vielleicht nur die Zahl in Dancing Script. Warum nimmt es mir diese Schrift nicht?

      Und zweite Frage: Der Monat steht zu nah an der Tages-Zahl. Wie kann ich die beiden auseinander schieben?

      Löschen
    5. Yey! Es hat funktioniert! Bin ich happy :D

      http://marionsgenusskueche.blogspot.de/

      DANKE!!

      Löschen
  76. so gern ich es gehabt hätte, leider verschwindet bei mir immer das gesamte datum. die stell die ich ersetzten soll in schritt2 habe ich leider auch nur einmal :D kann man das was machen?

    AntwortenLöschen
  77. Tolles Tutorial, funktioniert super und sieht toll aus :)

    AntwortenLöschen
  78. Ich hatte auch so ein Datum und seit gestern Abend ist mein Datum einfach verschwunden! Egal was ich mache, es taucht nicht mehr auf :(
    Dabei habe ich meiner Meinung nach nichts verändert!

    AntwortenLöschen
    Antworten
    1. Uh, das ist aber sehr seltsam. Bist du sicher, dass du nichts verändert hast?
      Ich würd mal das Tutorial nochmal durchspielen und gucken, ob alles noch da ist, ansonsten einfach nochmal machen, wenn's beim ersten Mal geklappt hat, sollte es wieder klappen :D

      Löschen
  79. Kannst du mir sagen, wo ich die Farbe ändere? hat alles geklappt, aber möchte natürlich nicht die Farbe in Lila haben. Kann ich einfach den Code nehmen der mir immer angezeigt wird, wenn ich die Schriftfarbe ändere im Blog? Da steht ja immer ein Zahl und für die Schrift hat es funktioniert xD aber ich möchte ja die Farbe des Kreises ändern :) danke

    AntwortenLöschen
    Antworten
    1. [...]Das Hauptdesign(ergo: den Kreis)machen wir mit span.date-headerund #date. Diese beiden bilden das "äußere Design".[...]

      span.date-header{
      [...]
      background-color: rgba(48, 12, 94, .8); /*Hintergrundfarbe*/
      [...]
      }

      [...]Was die Farben in CSS angeht (Frage ist jetzt auch schon paarmal gekommen.
      Ich habe einige in RGBA angegeben, wozu ich einen Post geschrieben habe (hier)
      Und für schnelle Farbcodes, klickt mal bitte hier. [...]


      Das sollte die Frage beantworten.

      Löschen
  80. Das Tutorial ist wirklich richtig klasse! Ich bin froh, immer mal wieder auf eure Ideen und Anregungen zurückgreifen zu können und eureTipps sind wirklich hilfreich!
    Ich habe nur eine Frage: Wie bekomme ich es hin, dass die Schrift des Datums komplett weiter in der Mitte steht? Im Moment sieht es bei mir noch so aus, als wäre es etwas zu weit nach unten verrutscht innerhalb des Kreises?! O.o Vielleicht habe ich auch nur was übersehen!

    Liebste Grüße! :)

    AntwortenLöschen
    Antworten
    1. Versuch bei .month margin-top einzufügen und zwar mit einem negativen px-Wert, dann sollte das ganze etwas weiter nach oben rutschen.

      Liebe Grüsse
      Myri

      Löschen
    2. Super ich danke dir! Es hat bestens funktioniert :)

      Löschen
  81. Hätte da ein zwei Fragen, :)
    Wo kommt den die Datumsgestaltung rein, also der letzte Teil.
    Und bei mir hängt die Blase/Kreis momentan in der Schrift drin, was muss ich den verändern, dass der Kreis weiter nach links rückt :)
    Hoffentlich kann man meine Fragen beantworten :)
    Liebe Grüße, maackii

    AntwortenLöschen
    Antworten
    1. Das kommt einfach zu davor genannter CSS, oberhalb des schliessenden Skin-Tags. Veränderte den Wert der Positionierung.
      Grüsse

      Löschen
  82. Ich hab vorher einen Kommentar bzw Frage geschrieben, hat sich erledigt :) sorry, dass ich erst verzweifel, dann schreibe und dann rumprobiere :) Vielen Dank für das Tutorial!! Ist echt super toll :)

    AntwortenLöschen
  83. Bei mir klappt alles bis zum CSS Code. Habs jetzt schon mehrmals neu Probiert. Funktioniert leider nicht. Könntest du mir weiterhelfen? Ich verzweifel noch -.-
    Falls du es dir ansehen willst hier mein Blog
    http://stilechtes.blogspot.co.at/

    AntwortenLöschen
    Antworten
    1. Was klappt denn beim CSS-Code nicht?

      Löschen
    2. seit ich den css code eingesetztz habe sieht man gar nix mehr. ich hab alles eingegeben und weg....

      Löschen
    3. Dann hast du ihn wahrscheinlich falsch eingefügt. Hast du drauf geachtet, dass keine geschweifte Klammer vor dem skin-tag war?

      Löschen
  84. Hallo!
    Erst einmal danke für diese Anleitung. :-)
    Ich bin bis zum CSS Datum gekommen und nun such ich vergebens span.date-header und #date . Ich kann es nirgends finden. Auch nicht mit der Suchfunktion STRG+F.
    Woran liegt das?

    AntwortenLöschen
  85. Hat alles einwandfrei funktioniert und sieht super aus ;)
    http://tinasseiteblog.blogspot.de/

    Liebe Grüße,
    Tina ~

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