Blogger: So kannst du deinen Post-Footer anpassen

- zuletzt aktualisiert am 21. September 2016

So ein Blogeintrag besteht ja nicht nur aus dem Inhalt und der Überschrift: als Leser will ich wissen, wann er veröffentlicht wurde, wer der Autor ist und wie viele Kommentare es bereits gibt bzw. wie ich selber zum Kommentarformular gelange. Auch die Kategorie und Schlagworte können interessant sein.

Diese Angaben sind sowohl in der Nähe der Überschrift gut aufgehoben, als auch am Ende des Artikels. Blogger platziert daher unter jedem Blogpost eine Box mit einigen dieser Infos: Name des Autors, Datum, Kommentare und ein paar Social Media-Buttons:

Blogger: Post-Footer ändern - Tutorial

Im Standardlayout („Einfach“) sieht dieser Post-Footer ziemlich hässlich aus. In diesem Tutorial lernst du, wie du die Box viel ansprechender gestalten kannst. 🙂

Der Inhalt des Post-Footers

Welche Elemente im Beitragsfooter überhaupt angezeigt werden sollen, kannst du über Layout » Blogposts festlegen.

Post-Footer bei Blogger ändern - Tutorial

Es öffnet sich ein PopUp-Fenster, in dem du alle zur Verfügung stehenden Infos rund um deinen Beitrag an- oder wegklicken kannst.

Am Ende des PopUps änderst du ihre Reihenfolge via Drag & Drop: der Kasten mit der etwas unglücklichen Bezeichnung „Meldungstext“ ist der Inhalt deines Beitrags, demzufolge ist alles darüber in der Nähe der Überschrift und alles darunter landet im Post-Footer.

Post-Footer bei Blogger anpassen - Tutorial

Guck einfach, welche Infos für deinen Blog sinnvoll sind und welche nicht, du musst nicht auf Deibel komm raus alle unterbringen. 😉

Die Beschriftung der einzelnen Infos kannst du gleich hier ändern. Statt „Labels“ hätte ich beispielsweise lieber das Wort „Themen“ – das kannst du einfach austauschen, indem du die neue Beschriftung eintippst.

So weit, so gut:

Blogger: Post-Footer ändern - Tutorial

„Einmal hübsch, bitte!“ – die Basisversion

So, jetzt haben wir uns das schnöde Grau aber lange genug angesehen!

Klicke auf Vorlage » Anpassen und dort auf Erweitert. Scrolle herunter bis zum Punkt Post-Footer.
Hier kannst du mit ein paar Klicks sehr rudimentär die Hintergrundfarbe der Box ändern, die Schriftfarbe sowie den Schattenwurf. Die Linkfarbe wird weiter oben bei Erweitert » Links eingestellt (und gilt dann für den gesamten Blog, nicht nur für den Post-Footer).

Blogger: Post-Footer ändern - Tutorial

Wenn dir diese simple Anpassung nicht reicht, kannst du dich jetzt im CSS austoben. 🙂

CSS-Kosmetik für den Post-Footer

Eigene CSS-Anweisungen notierst du in Blogger über Erweitert » CSS hinzufügen.

Im Folgenden habe ich verschiedene Code-Schnipsel zusammengestellt, die du frei kombinieren und abändern kannst.

Los geht’s mit ein paar Basisangaben für die Box selber:

.post-footer {
   background: #f7f1e2;
   border: 1px solid #c6a49a;
   border-top-width: 5px;
   color: #b19289;
   font-size: 13px;
   padding: 10px;
}

Hier ändern wir die Hintergrundfarbe (background), legen außen herum einen Rahmen (border), der am oberen Rand dicker sein soll, setzen die Schriftfarbe (color), die Schriftgröße (font-size) und fügen dann noch etwas Innenabstand (padding) zwischen dem Rahmen und dem Text hinzu.

Wenn du den Links im Post-Footer eine eigene Farbe zuweisen möchtest, geht das über:

.post-footer a {
   color: #e94e77;
}

.post-footer a:hover {
   color: #d68189;
}

Eine Trennlinie zwischen den beiden Zeilen erreichst du über:

.post-footer-line-1 {
   border-bottom: 1px dashed #c6a49a;
   padding-bottom: 10px;
}

.post-footer-line-2 {
   padding-top: 10px;
}

So sieht’s mittlerweile aus:

Blogger: Post-Footer ändern - Tutorial

Tipp: so kannst du den Post-Footer bei Blogger anpassen #tutorial Klick um zu Tweeten

Schlagwörter im Button-Look

Wer sagt denn, dass die Labels wie einfache Links aussehen müssen?
Mit einem Klecks Hintergrundfarbe und abgerundeten Ecken machen sie gleich was her:

Blogger: Post-Footer ändern - Tutorial

Hierfür brauchst du erstmal folgenden CSS-Code:

.post-footer .post-labels a {
   background: #ff9e9d;
   border-radius: 20px;
   color: #fff;
   padding: 5px 10px;
   transition: .5s background ease;
}

.post-footer .post-labels a:hover {
   color: #fff;
   background: #e94e77;
   text-decoration: none; 
}

Die sogenannte Transition sorgt für einen sanften Farbwechsel, wenn du die Maus über eines der Tags bewegst.

Blogger: Post-Footer ändern - Tutorial

Je nachdem, welche Vorlage du verwendest, hast du zwischen den Schlagwörtern eventuell noch Kommata zu stehen. In diesem Button-Style stören die natürlich.

Die eliminieren wir im HTML – geh auf Vorlage » HTML bearbeiten und suche folgenden Code:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if>

Hier siehst du, wo das Komma gesetzt wird: direkt vor dem Ende der if-Abfrage (wo geprüft wird, ob es das letzte Label ist – falls nein, wird ein Komma dahinter eingefügt).
Ersetze den obigen Code also durch:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'></b:if>

Voilà!

… du bist dran!

So, das waren jetzt einige Ideen und Anregungen, wie du mehr aus deinem Post-Footer herausholen kannst. Ich hoffe, es war etwas Hilfreiches für dich dabei.

Fragen kannst du gerne in den Kommentaren stellen, und vielleicht magst du ja zeigen, wie du deine Footerbox gestaltet hast? 🙂

    Kommentare

  1. Sam Metag am 2. Juli 2013 um 14:24:

    Ich bin richtig froh deinen Blog gefunden zu haben. Ich versuche da auch schon mein Glück, hab nur eine Frage, wie bekomme ich das von CSS-hinzufügen auf meinen Blog. Denn wenn ich das mache, bleibt alles bei mir gleich. Es verändert sich nicht.

    • Anne am 2. Juli 2013 um 16:35:

      Hast du ganz oben rechts auf den orangen Button gedrückt, „Auf Blog anwenden“?

      Während man CSS-Anweisungen in das Feld eintippt, aktualisiert sich die Live-Vorschau des Blogs unten drunter auch schon direkt.

      • Sam Metag am 6. Juli 2013 um 11:40:

        Ja, hab ich gemacht. Aber die Live-Vorschau ändert sich bei mir auch nicht.
        Ich glaube sogar das mein Account nicht richtig funktioniert, ist nicht das erste was bei mir nicht geht. :/

  2. Nadine am 2. Juli 2013 um 16:05:

    Vielen Dank, das hat mir sehr geholfen.
    Da werde ich mich gleich mal an die Arbeit machen.
    DANKE ☻

  3. Chamy am 14. August 2013 um 14:10:

    Wirklich klasse und hilfreicher Blog! Freue mich gerade drüber gestolpert zu sein.
    Sag weißt du, ob man seinen Footer auch individull anpassen kann. Also ich hätte gerne meine eigenen Social Media Buttons in dem Footer, schaffe es aber irgendwie nicht die einzubauen. Suche mir schon seit Tagen nen Wolf, aber scheinbar hat das noch niemand probiert/geschafft.
    Hast du ne Ahnung oder nen Tipp?
    Danke!

  4. Penny Lane (Moni) am 17. August 2013 um 19:21:

    Danke wegen des CSS neulich! Hab’s gefunden^^ Bin auch „antworten“ in der Mail gegangen, aber die Site ist nicht erschienen, deswegen hier 🙂 Das sieht aber auch sehr schön aus, mein Footer ist auch noch recht langweilig^^

    LG
    Penny

  5. Franzi am 23. August 2013 um 18:18:

    Tolles Tutorial, wirklich sehr hilfreich 🙂
    Hab eben das mit den Labels im Button-Look ausprobiert, zwar ein bisschen abgeändert, aber klappt super!
    Hätte diesen Button-Look nun auch gerne bei meinen Labels in der Sidebar, weißt du wie das funktioniert?
    Lieben Gruß

  6. Laura am 28. Oktober 2013 um 12:42:

    hey du! erstmal tolles tutorial, funktioniert super. nur mein problem ist, dass die elemente, die im blog-footer eigentlich angezeigt wurden, alle nicht erscheinen. also kann bei mir niemand kommentare abgeben, meine labels sehen oder sonst was :/ er sieht jetzt zwar hübsch aus, aber funktioniert irgendwie nicht. ich hab mich schon durch ganz google gesucht aber niemand scheint das problem zu haben. auch im layout hab ich das eingestellt mit kommentaren etc aber er zeigt es mir einfach nicht an.. kannst du mir vielleicht sagen wie man das beheben kann?

    • Anne am 28. Oktober 2013 um 14:33:

      Hmm, in deinem Quellcode ist nur eine leere Box namens #comments, aber eben ohne Inhalt.
      Hast du mal unter Einstellungen –> „Posts und Kommentare“ geschaut, was da eingestellt ist?

      • Laura am 28. Oktober 2013 um 15:01:

        kommentarposition: vollständige seite
        jeder darf kommentare erstellen
        kommentarmoderation: nie
        sicherheitsabfrage anzeigen: ja
        rückverweise anzeigen: verbergen
        kommentarformular nachricht: hinzufügen
        :/ ist das mit der leeren box schlimm? das ist echt komisch, der zeigt nichts an!
        danke für deine antwort!

        • Anne am 28. Oktober 2013 um 19:49:

          Hmm… von den Einstellungen her sollte man auf jeden Fall kommentieren können.
          Daher tippe ich jetzt darauf, dass in deinem Template die nötigen Anweisungen zur Ausgabe der Kommentare etc. fehlen. Was für ein Layout verwendest du denn? Werden die Kommentare angezeigt, wenn du testweise mal auf eine andere Vorlage umstellst?

          • Laura am 28. Oktober 2013 um 19:53:

            Ich hab es rausgefunden, endlich 🙂 hab zwar jetzt 3 Stunden davor gesessen aber egal. Man kann es bei den posts einstellen, da wo man die Labels zb reinschreibt. Trotzdem danke!

          • Anne am 28. Oktober 2013 um 20:19:

            Ahh, okay. Super, dass es jetzt funktioniert! 🙂

  7. Regina am 5. Juli 2014 um 0:48:

    Erst einmal vielen lieben Dank für das (wirklich gut verständliche) Tutorial! Ich bin sehr froh, auf Deinen Blog gestossen zu sein!

    Ich konnte es auch schon so weit gut umsetzen und anwenden und habe die Tags nun als Buttons dargestellt. Allerdings muss ich zu meiner Schande gestehen, ein ziemlicher „Tag-Messie“ zu sein… Teilweise habe ich so viele Tags pro Post, dass sie sich unterhalb des Posts über zwei Zeilen ziehen. Bei der Darstellung als Buttons gibt es nun Überschneidungen der oberen und der unteren Reihe. Kannst Du mir vielleicht helfen und sagen, an welchen Stellen ich die Ausrichtung / Abstände erweitern muss, damit sich die Buttons nicht mehr überschneiden? Das wäre sehr nett!

    Vielen Dank, Regina von „Hambrón“

    • Anne am 5. Juli 2014 um 9:28:

      Hallo Regina,

      es freut mich, dass dir mein Tutorial weitergeholfen hat! 🙂

      Den horizontalen Abstand zwischen den Tags kannst du über die Zeilenhöhe vergrößern:

      .post-footer .post-labels a {
      line-height: 25px;
      }
  8. Cat am 13. September 2014 um 22:19:

    Toller Post!
    Waren sehr viele schöne Ideen dabei, danke (:

    Ich bin gerade dabei, mein Blogdesign etwas umzugestalten, mal schauen ob ich ein paar Ideen von dir hierbei verwenden kann 😉

  9. Patricia am 19. November 2014 um 0:19:

    Hej meine liebe,

    der Post war super hilfreich.
    Ich will allerdings meine „labels“ mit Standort unter dem Posttitel, soweit hab ich auch alles erledigt 🙂 weißt du nun wie ich das wort LABELS bzw STANDORT aus dem HTML löschen kann? Die zwei angaben möchte ich einfach loswerden 🙂

    Liebste Grüße Patricia

  10. Amelie Held am 7. Dezember 2014 um 16:41:

    Ich bin wirklich so glücklich, dass ich bei der suche im Internet auf deinen Blog gestoßen bin. Diese Anleitung war die erste bei der ich mich getraut habe es zu probieren und es hat gleich funktioniert. Das hat mir mutgemacht auch andere sachen auszuprobieren. Tausend Dank.

  11. Sandra am 15. Mai 2015 um 15:06:

    Hallo, tolle Ideen, die du hier vorschlägst. Ich wollte so gern auch die Labels mit dem farbigen hintergrund und den abgerundeten Ecken haben. Du wirst jetzt lachen aber ich hab keine Ahnung so ich den Quelltext einfügen muss. Also wie ich hinkomme schon aber ich weiß nicht wo im HTML Code der Vorlage ich deinen CSS_Code reinkopieren soll. Vielleicht kannst du mir bitte helfen? Dankeschön!

    • Anne am 15. Mai 2015 um 19:05:

      Hallo Sandra,

      das CSS gibst du hier ein:
      Vorlage –> Anpassen –> Erweitert (hier ganz runterscrollen) –> CSS hinzufügen.

      Ich hoffe, das hilft dir weiter! 🙂

  12. Kornelia am 29. Juli 2015 um 22:37:

    Happy auf deiner Seite gelandet zu sein, hat mir bis jetzt sehr geholfen meinen Blog zu verschönern!
    Alles hat bis jetzt super geklappt, bis auf die Trennlinie im Post-Footer … die Linie ist schon da nur trennt sie die beiden Zeilen nicht, sondern liegt oberhalb.
    Ausserdem lassen sich bei mir die verschiedenen Elemente zwar verschieben, erscheinen dann jedoch nicht so wie ich sie im Pop-up Fenster angeordnet habe. Hab auch nicht vergessen zu speichern und Layout speichern ebenfalls gedrückt, doch da ändert sich nichts.
    … und das mit dem Datum oben weg wäre zwar gegangen, da fand ich die Stelle die ich löschen sollte doch und unten rein, konnte ich nicht machen, ich fand nur dies:

    da wusste nicht wo ich dann was einfügen soll.
    Vielleicht kannst du mir helfen!
    Ah eine Frage wäre noch, wie krieg ich zwischen dem >> Mehr erfahren Button und dem post-footer etwas Abstand rein?

    Freu mich von dir zu lesen!
    Herzlich Grüße
    Kornelia

    • Anne am 30. Juli 2015 um 6:55:

      Hallo Kornelia,

      willkommen hier auf neontrauma.de! 🙂

      Ich habe mal gerade bei dir im Code geschaut – die Linie wird bei dir deshalb vermeintlich oberhalb statt zwischen den beiden Zeilen angezeigt, weil die erste Zeile bei dir leer ist. In dem besagten Popup gibt es für diesen Footerbereich ja drei gestrichelt umrandete Boxen – kannst du die Elemente da nicht auf die ersten beiden Boxen verteilen?

      • Kornelia am 30. Juli 2015 um 10:58:

        Danke für deine Rückmeldung, das ist genau das Problem, egal wie ich die einzelnen Elemente aufteile (in den ersten zwei Boxen, oder sogar auf alle drei, ob die Kommentare als erstes sind oder die Uhrzeit) sie verändern sich im Blog nicht! habs ausprobiert und mal überall ein Häckchen gemacht … keine Veränderung!!!
        Bin ratlos

        • Anne am 31. Juli 2015 um 6:42:

          Hallo Kornelia,

          mh… dann sind diese Funktionen in deinem Theme womöglich hardgecodet, d.h. in deinem Code steht kein „Platzhalter“ für das, was du im Popup verschiebst, sondern der Code für die Kommentare, das Datum etc. steht direkt im Code drin.
          Ich hab mal gerade nachgeschaut – du verwendest eine der „Bildfenster“-Vorlagen, richtig? Da steht das tatsächlich direkt im HTML – doof. Das heißt, du müsstest dann die einzelnen Blöcke im HTML verschieben.
          In dem Tutorial hier wird erklärt, wie das funktioniert: http://xomisse.com/blog/rearrange-post-header-footer-section/

          Ich hoffe, das hilft dir weiter!

          Dass das Verschieben via Drag&Drop nicht bei allen Blogger-Templates funktioniert, ist mir übrigens auch neu. Bin ja eigentlich eingefleischte WordPress’lerin und habe mir Blogger immer nur angeguckt, um Tutorials zu schreiben. 😉

          Viele Grüße
          Anne

  13. Sarah Böcker am 4. August 2015 um 11:14:

    Hallo 🙂
    Du hast mir mit deinen Tutorials schon sehr geholfen. 😉 Jetzt habe ich aber das Problem, dass mit die Freischaltflächen nicht mehr angezeigt werden. Das Häkchen ist gesetzt…
    Ich muss sagen, ich habe viel gebastelt und weiß nicht, ob ich da im HTML was drin hab, was das vielleicht blockiert, konnte aber nichts finden…
    Hast du eine Idee, woran es liegen könnte?
    Ganz liebe Grüße
    Sarah

    • Anne am 6. August 2015 um 6:52:

      Hallo Sarah,

      was meinst du denn mit „Freischaltflächen“? Ich kann mir deinen Code gern mal angucken, weiß aber gerade nicht, wonach ich Ausschau halten soll. 😉

      Liebe Grüße
      Anne

  14. Sarah Böcker am 6. August 2015 um 7:02:

    Morgen 🙂
    Also ich habe gerade nochmal nachgesehen, die heißen in Wirklichkeit Freigabeschaltflächen 😀
    Mir geht es um die „Teilen“-Buttons unter den jeweiligen Posts. Habe sie akktiviert, in der mobilen Version habe ich auch das G+, aber nicht die „Teilen“-Buttons.
    Wäre super lieb,wenn du mal reinschaust.
    Vielen lieben Dank.
    LG
    Sarah

  15. Katharina Meyer am 17. August 2015 um 18:44:

    Weltklasse!!!!
    Hat nach meinen Vorstellungen auf Anhieb geklappt.

    Vielen, vielen lieben DANK!

  16. Tini am 27. August 2015 um 13:35:

    Hey 🙂
    Erst einmal danke für dein Tutorial 🙂
    Ich hab allerdings das Problem, das ich den post-Footer immer auf der Startseite habe und bei den Posts. Ich möchte ihn aber nur bei den Posts haben und auf der Startseite entfernen. Leider habe ich keine Anleitung dazu gefunden wie es funktioniert 🙂
    Könntest du mir da weiterhelfen?
    <3 tini

    • Anne am 28. August 2015 um 6:10:

      Hej Tini 🙂

      Die sauberste Lösung ist, den betreffenden HTML-Code für den Post-Footer direkt zu löschen.
      Dafür gehst du auf „Vorlage“ –> „HTML bearbeiten“ und siehst hier deinen ganzen Quellcode. Drück [Strg] + [F], um ein Suchfeld zu öffnen, und gib ‚post-footer‘ ein (mit diesen einfachen Anführungszeichen).
      Vermutlich wird das an zwei Stellen gefunden – in meinem Testlayout z. Bsp. in Zeile 1396 und in 1536. Die erste Stelle ist für die Startseite zuständig, die zweite für die Einzelansicht eines Artikels. Was was ist, erkennst du ein paar Zeilen weiter oben… bei dem Blogposting steht ungefähr 50 Zeilen weiter oben so etwas: itemtype=’http://schema.org/BlogPosting‘.
      Das heißt, beginnend ab Zeile 1536 habe ich den ganzen Div-Block namens ‚post-footer‘ gelöscht – also mitsamt seinen Inhalten. (Falls du mit HTML noch nicht so vertraut bist, empfehle ich dir dieses Tutorial, was ich vor einiger Zeit geschrieben habe und was das Grundprinzip der verschachtelten Elemente erklärt: HTML & CSS – die Grundlagen.

      Ich hoffe, das hilft dir weiter?

      Liebe Grüße
      Anne

      Wichtig: Bevor du etwas an deinem Code änderst oder löschst, leg dir unbedingt eine Sicherung des Originals an! 🙂

  17. Eva am 23. September 2015 um 12:11:

    Dein Blog ist echt super hilfreich und verständlich geschrieben.
    Komme gerne wieder zurück, wenn ich mal wieder Hilfe brauche !

    Liebe Grüße
    Eva

  18. Marie Ledoux am 26. Oktober 2015 um 0:31:

    Hallo,

    ich habe es tatsächlich geschafft mit deiner Anleitung und ich bin ein totaler No-Checker was HTML oder CSS angeht.
    Vielen Dank für die Anleitung.

    lg
    Marie

  19. Mark Colour am 16. November 2015 um 21:42:

    Hallo, dein Tutorial hat supoer funktioniert. Danke dafür 🙂 Ich würde gerne die Label Buttons genauso auch in meiner Sidebar haben. Hast du dafür ebenfalls ein Turorial?

    • Anne am 17. November 2015 um 21:36:

      Hi Mark,

      was genau meinst du? Dass irgendwelche Links in der Sidebar diesen Button-Effekt haben? Guck einfach mal in den Quelltext deiner Seite (Strg + U drücken) und such dort nach deinen Links, dann findest du ihre Klasse heraus und kannst das CSS entsprechend umschreiben. 🙂

      • Mark Colour am 17. November 2015 um 23:15:

        Es soll nur für die Labels das selbe Design sein. Habe ich auch schon versucht, aber ohne, dass mich da jemand an die Hand nimmt, bin ich etwas planlos 😀 aber ich schau mir das ganze nochmal an 🙂

  20. Claudia Mark am 1. Dezember 2015 um 11:35:

    Hi!

    Oh Mann, danke, daß es diesen Blog (und diesen Post) gibt. Ich wollte so einiges aufhübschen auf meinem Blog und dank Dir wird das nicht in ewiger Sucherei, Frust und Rumprobieren enden. Mein Footer sieht schon erheblich besser als zuvor aus und auch den Rest gehe ich die Tage an.

    DANKE!

  21. Jasmin am 11. Februar 2016 um 15:59:

    Hallo,

    erstmal herzlichen Dank für deine einfachen Erklärungen 🙂

    Aleerdings habe ich bei meiner Seite das Problem, dass unter meinem Beitrag einfach nur „Kommentare“ angezeigt wird und man erst raufklicken muss um auf die Funktion zu kommen. Eingetragene Kommentare sind somit auch nicht gleich sichtbar. Hast du eine Idee, wie ich das ändern kann? (sprich so eine Kommentarfunktion wie bei dir, wo ich gerade schreibe, erscheint)

    Lieben Dank im Voraus 🙂

    • Anne am 12. Februar 2016 um 7:33:

      Hallo Jasmin,

      mh, bei mir hier auf neontrauma.de steckt ja WordPress unter der Haube, nicht Blogger. Daher funktioniert das etwas anders.

      Auf meinem Blogger-Testblog klappt das jedoch auch… also, wenn ich einen Beitrag öffne, werden die Kommentare darunter direkt angezeigt.
      Oder meinst du, dass auf der Startseite des Blogs bei den einzelnen Artikeln nicht die Anzahl der Kommentare steht, sondern nur „Kommentare“? – Dann hilft dir vielleicht dieses Tutorial weiter: http://bloggerlatein.blogspot.com/2012/07/anzahl-der-kommentare-wieder-anzeigen.html

      Viele Grüße
      Anne

      • Jasmin am 13. Februar 2016 um 20:31:

        Lieben Dank – das konnte ich schon mal einstellen 🙂 Das Merkwürdige ist, dass ich auf meinem Handy, selbst in der Webansicht die Kommentare dann auch direkt sehe, nur auf meinem Laptop nicht. Ich weiß nicht, ob das an Windows 10 liegen könnte? So ganz bin ich da leider noch nicht hinter gestiegen. Hast du eine Idee?

        Liebe Grüße!

  22. Antonie am 17. März 2016 um 0:34:

    Hallo! Danke für dieses tolle Tutorial! Nur eine ganz doofe Frage – wo kann ich denn die Hintergrundfarbe ändern? Bräuchte eher was gräuliches als Hintergrund 😉 LG Antonie

    • Anne am 17. März 2016 um 9:03:

      Hallo Antonie,

      die Hintergrundfarbe legst du über die Angabe „background“ fest – aktuell haben wir ja das hier drin:

      background: #f7f1e2;

      Da änderst du den Wert für den Farbcode ab. Hier kannst du dir eine Farbe frei wählen und erhältst den entsprechenden sog. Hex.Code: http://html-color-codes.info/webfarben_hexcodes/ 🙂

      Viele Grüße
      Anne

      • Antonie am 17. März 2016 um 9:55:

        Dankeschön 🙂 Hatte es gestern nach einigem Tüfteln dann auch noch rausbekommen – aber superschnelle Antwort, danke!

        Liebste Grüße,
        Antonie

        • Anne am 17. März 2016 um 10:06:

          Gerne – freut mich, dass es jetzt bei dir klappt! 🙂

          • Antonie am 18. März 2016 um 0:19:

            Jetzt habe ich noch eine ( wahrscheinlich unlösbare 😀 ) Frage – ich würde gern das gleiche Schema ( also Button-Look ) über mein Datum legen – kann ich das irgendwie hinbekommen?

            Liebste Grüße,
            Antonie

          • Anne am 18. März 2016 um 17:35:

            Hallo Antonie,
            klar, kein Problem. 🙂
            Dafür wendest du den gleichen CSS-Code einfach auf eine andere HTML-Klasse an.
            Statt .post-footer .post-labels a also etwa .post-timestamp (wenn du wie aktuell bei dir im Blog nur die Uhrzeit anzeigst) oder .post-date (wenn du das Datum anzeigst).

  23. janet am 23. April 2016 um 19:20:

    Hallöchen!

    Dieser Post hat mir total geholfen, vielen Dank! Gerade für jemanden wir mich, mit wenig (bis gar keinen) CSS Kenntnissen, eine wirklich hilfreiche Anleitung.

    Liebe Grüße

    Janet

    • Anne am 25. April 2016 um 6:46:

      Hallo Janet,

      freut mich, dass ich dir mit dem Tutorial weiterhelfen konnte! 🙂

      Liebe Grüße
      Anne

  24. Jasmin am 25. April 2016 um 16:02:

    Hallo liebe Anne,
    ich habe nach deinen Grundvorgaben meine Labels etc. anzeigen lassen, aber leider werden die natürlich nicht in der mobilen Version wiedergeben, hast du da einen Tipp für mich?
    Auch wenn es nur die Langweiler-Labels aus der Blogger Vorlage wären.
    Ich hoffe, dass ich mich einigermaßen verständlich ausdrücken konnte.
    Liebste Grüße,
    Jasmin ♥

    • Anne am 26. April 2016 um 6:57:

      Hallo Jasmin,

      mh, für die mobile Ansicht verwendet Blogger standardmäßig ein anderes Template. Das kannst du aber ändern:
      Geh auf Vorlage –> Mobil –> dieses Zahnradsymbol. Im Dropdown stellst du die Vorlage auf „“benutzerdefiniert“.
      Anschließend kannst du im HTML-Code deines Templates (unter Vorlage –> HTML bearbeiten) einstellen, welche Gadgets in der mobilen Ansicht angezeigt werden sollen und welche nicht.

      Hier ist das ganz gut erklärt: http://sg.utez.de/2013/10/mobil-version-eines-blogspot-blog.html

      Ich hoffe, das hilft dir weiter! 🙂

      Liebe Grüße
      Anne

  25. Jasmin am 25. April 2016 um 21:48:

    Hallo, ich habe nach deiner Anleitung meinen Post Footer gestaltet, klappt auch wunderbar und sieht toll aus! Also danke für die tolle Erklärung.
    Leider sind aber in meiner mobilen Ansicht keine Labels zu sehen, kannst du mir da einen Tipp geben? Ich würde zur Not auch die unschöne alte Ansicht für mobil definieren, aber ich weiß nicht wie :-/

  26. Christine am 20. Juli 2016 um 10:44:

    Liebe Anne,

    vielen lieben Dank für deine wertvollen Tipps!
    Ich habe allerdings noch eine Frage zur Reihenfolge der Elemente. Ich möchte gerne, dass der Standort direkt über dem Meldungstext steht, also unter Posttitel und Datum (wie beispielsweise bei diesem Blog: http://uno.thebasicpage.com/).

    Wenn ich per Drag & Drop die Reihenfolge versuche zu ändern, passiert leider nichts und er springt sofort auf die vorherige Einstellung zurück. Weißt du, woran das liegen könnte bzw. gibt es dazu einen CSS Verweis, der diese Einstellung übernimmt?

    Vielen Dank für deine Hilfe!

    Liebe Grüße,
    Christine

  27. Lotte am 19. Oktober 2016 um 21:58:

    Moin liebe Anne,
    Ich habe Deinen Beitrag über Google gefunden, weil ich nach der Lösung eines Problems auf meinem Blog suche…
    Magst Du mal auf meinen Blog schauen, dort habe ich die Frage an meine lieben Computerfreaks da draußen gestellt, nur bislang konnte mir niemand helfen. Ich glaube, es liegt daran, dass ich keine Möglichkeit habe, die Option „Rahmenfarbe“ aufzurufen, ist einfach nicht da. Somit kann ich die Farbe meines Datumsheaders nicht ändern.
    Vielleicht kannst Du mir helfen, ich würde mich sehr freuen.
    Liebe Grüße von Lotte
    frauchen-naeht

    • Anne am 24. Oktober 2016 um 6:31:

      Hallo Lotte,

      leider ist die Adresse zu deinem Blog nicht vollständig (nur „frauchen-naeht“), wie lautet denn der komplette Link?
      Dann schaue ich gerne mal bei dir vorbei.

      Liebe Grüße
      Anne

  28. Susanne am 11. April 2017 um 13:47:

    Moin!
    Hat bei mir super geklappt <3 Danke schön!!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.