How to style your "langweiliges Kommentarfeld" [Tutorial]

23. Oktober 2013 | 87 Kommentare



(Dieses Tutorial soll, wie immer, keine Vorgabe etc. sein, sondern ein Inspirationsanstoß und eine Möglichkeit, sich eventuell mehr mit HTML auseinanderzusetzen!) Ich finde das Standard-Kommentardesign von Blogger immer etwas trist und traurig, deshalb heute ein eigentlich relativ simples Tutorial, mit dem man aber viel bewirken kann. EDIT: Dafür, dass es eigentlich als Erklärung für Anfänger gedacht war, ist es doch eine ziemlich herausfordernde Anleitung geworden! Die Tutorials die ich wiederum angewandt habe verlinke ich euch, wär ja sonst mies; allerdings habe ich auch Sachen abgewandelt, hinzugefügt oder einfach weggelassen. Die Grundlagen habe ich alle aus Myris Post gezogen, den ich Interessierten unbedingt empfehlen kann :)



1. Schritt
Macht euch (immer!) ein Backup von eurem Template, damit ihr, sollte was schiefgehen, abgesichert seid: Vorlage → rechts oben. Ich arbeite hier übrigens mit der stinknormalen, unveränderten Simple-Vorlage.



2. Schritt
Wir arbeiten im HTML-Code (Vorlage  HTML bearbeiten) und klauen dem Kommentar mal sein Standardoutfit. Heißt, wir suchen und entfernen die beiden Linien und den Hintergrund, damit wir auf einer ganz leeren Fläche arbeiten können. Löscht dafür diese Codes raus (sie werden nicht Buchstabe für Buchstabe genau so sein):
Sollten diese Codes bei euch von Grund auf nicht drinnen sein springt gleich zum nächsten Schritt (wir löschen sie hier eh nur raus, damit sie nicht stören)!





3. Schritt
Die blauen Links habe ich via Vorlagendesigner (Vorlage  Anpassen) grau gefärbt, damit es später im Gesamten besser aussieht. Im Vorlagendesigner kann man leicht Dinge wie Farben, Schriftfarbe, Schriftgröße etc. einstellen, jetzt geht's aber wieder weiter im HTML-Code. Damit die Profilbildchen nicht ganz so eckig aussehen, runden wir sie ab und ändern die Größe ein wenig (50% ist ganz rund). Sucht dazu (zuerst Klick auf HTML-Code, damit des Cursor im Kästchen drin sitzt, sonst funktioniert die Suche nicht) mit strg+f nach /* Comments und fügt den unterstehenden Code unter der "Überschrift" ein. /* ... markiert immer einen Bereich, der speziell etwas bestimmt, also hier die Kommentare. Alles, was wir in diesem Tutorial machen, sollte dann unter /* Comments aufgelistet sein!




4. Schritt:
Zu farblos? Dann färben wir die Felder mal ein bisschen ein! Auf Colourpicker könnt ihr alle möglichen Farben ermitteln. Ich würde euch eine Farbe sehr nah am Weiß empfehlen, weil zu kräftige Töne einen fast erblinden lassen oder zumindest sehr sehr unangenehm anzusehen sind. Ich habe hier zB #FFFDE0, ein sehr helles Gelb, verwendet. :)
Und weil es so spaßig ist - und weil wir's können! - runden wir die Kommentarfelder ebenfalls ab und fügen einen Rahmen hinzu. 

Background ist die Hintergrundfarbe, das dürfte allen einleuchten. 
Border stellt den Rahmen dar; 2px ist die Dicke der Linie, die Zahl natürlich variabel. Statt dotted (gepunktet) stehen euch noch die Befehle dashed (gestrichelt) und solid (durchgezogen) zur Verfügung.
Die Ziffernfolge nach dem # ist wieder die Farbe. Achtet darauf, dass ihr das ";" am Ende eines Abschnitts NIE weglöscht, das ist mordswichtig!
Die vier Stellen mit den 15px definieren je die Rundung der Ecken. Größere Zahl = größere Rundung, kleinere Zahl = kleinere Rundung. Das wird hier so oft wiederholt, damit die abgerundeten Ecken in möglichst vielen Browsern richtig angezeigt werden.




5. Schritt
Es nimmt Form an ... Jetzt kommen nur noch Einzelheiten. Als nächstes machen wir den Namen des Kommentarautors ein wenig größer (bei 110% veränderbar), verschieben das Datum und das "Antworten" ganz nach rechts, damit man da ein gewisses System erkennen kann. (Falls euer Button dadurch total verrutscht, sagt ihr mirs bitte - war ein Experiment :D) Mir gefällt die Struktur einfach besser, da hat man auf der einen Seite den Namen und den Text hat, und auf der anderen Seite die ganzen anderen Sachen. Ist einfach geordneter.




6. Schritt
Ich finds immer schön, wenn die Kommentare des Postautors anders hervorgehoben werden. Dazu benutzen wir ein schönes Tutorial von CopyPasteLove. Ich hab mich für ein blasses Lila entschieden. Hier interessiert euch nur Border und Backround, die wir beide schon kennen; ich werde den selben Borderstyle von vorhin anwenden und nur die Hintergrundfarbe ändern. Wie, was, wo, wann? Bitte dazu das kurze Tut von CPL lesen!
Achtung: Dieser Code wird als einziger nicht unter /* Comments gelistet, sondern direkt über </body> platziert!





7. Schritt
Was stört jetzt noch? Ich weiß ich bin eine Perfektionistin - aber dieser dämliche riesige Stift nach dem Namen des Postautors! *Krise krieg* 
Sucht euch dazu ein simples Bild, einen Stern, ein Peace-Zeichen etc. das ihr neben eurem Namen haben wollt, am besten mit einfarbigem Hintergrund - in meinem Fall eben eine Pusteblume - und falls ihr genauso GIMP-unbegabt seid wie ich, könnt ihr euch auf dieser Seite die Hintergrundfarbe transparentieren: Datei uploaden → Edit Transparent (ganz unten)  Farbe im Bild anklicken. Diese Methode ist zwar eher schlecht als recht, weil man nur eine einzige Farbe transparent machen kann - aber meistens erfüllt sie ihren Sinn und eine bessere und genauso leichte hab ich noch nicht gefunden, gnaaaa. Tut leid. 

Nun müsst ihr die Größe des Bildes radikal verändern: der Stift ist zB nur 18x18, meine Pusteblume 18x6 groß. Picmonkey → uploaden → resize. Dieses Bild speichert ihr, lädt es in eurem Blog hoch und holt euch mit Rechtsklick die Bild-URL. 

*verschnauf* Ein bisschen kompliziert, aber diese ganze Sache mit dem Bild finden und anpassen und pipapo ist das Schwierige. Jetzt kommt das simplere Einfügen. Sucht nach diesem Code (oder nur der Überschrift: .comments ...):


Sehr ihr data:image/pngBLABLABLA? Das ist die rieeesige URL des blöden Stiftes, und die löscht ihr raus. Wollen wir ja nicht haben. Stattdessen fügt ihr die URL eures gewünschten Bildes, in meinem Fall http://oi44.tinypic.com/152orqw.jpg, ein:





ET VOILÀÀÀ!
Vielen Dank an mein wunderbares Kommentarmodel Elle! :D

Natürlich könnt ihr da ganz viel variieren. Ihr könnt auch den Hintergrund weiß lassen und den Kommentar nur einrahmen. Oder andersrum. Oder doch nur die Kommentare des Autors hervorheben? Es steht euch offen! Ich hätte auch die einzelnen Schritte wie das Abrunden, Einfärben, blabla des Tutorials separat schreiben können - also ganz viele, kurze Posts - das wäre vielleicht einfacher zu behirnen gewesen. Aber so hat man wenigstens gleich mehrere Sachen vereint auf einem Blick. (Ihr könnt euch nicht vorstellen wie sehr es mich aufregt, wenn ich monatelang auf ein neues Tutorial warten muss, das ich brauche!!) Falls ihr noch Fragen habt, fragt ohne Hemmungen in den Kommentaren, und ich werde mit bestem Wissen und Gewissen antworten, soweit es mir eben möglich ist. 

Bitte, bitte, bitte sagt mir, wie es euch mit diesem Tutorial ergangen ist. Das war bis jetzt mein längstes und schwierigstes und ich bin mir nicht sicher, ob ich nicht vergessen habe, irgendwas Wichtiges zu erklären. Rückmeldung in den Kommentaren würde mir sehr helfen, mich mehr euch anzupassen und es besser machen zu können! :) Falls ihr meine Anleitung verwirklicht habt, kommentiert doch drunter damit ich euer Ergebnis angucken kann.

Edit 2016: Es tut mir sehr, sehr leid dass ich nicht auf alle eure Fragen in den Kommentaren eingehen kann! Probiert selbst auf einem Testblog an eurem Problem herum, oft findet man die Lösung auch im Alleingang. Ihr könnt mir auch eine Email schreiben, auf Mails reagiere ich eher als auf Kommentare!

87 Kommentare

  1. Wieder so ein tolles Tutorial. :) Werd ich auf jeden Fall mal ausprobieren.

    AntwortenLöschen
    Antworten
    1. Vielen Dank, ich hoffe du hast damit möglichst keine Probleme :)

      Löschen
  2. Hallo,

    vielen Dank für das tolle Tutorial. Schritt 6 wollte er bei mir nicht annehmen, da kam eine Fehlermeldung, also habe ich es wieder rausgelöscht. Schritt 7 habe ich von mir aus nicht gemacht. Der Rest hat wunderbar funktioniert.
    Vielen Dank :)

    LG Anja

    AntwortenLöschen
    Antworten
    1. Freut mich :) Das liegt wahrscheinlich daran, dass du den Code genauso wie die anderen auch unter /*Comments gesetzt hast, dieser Code wird als einziger direkt über </body> platziert, das steht bei CPL. Ist aber ja auch kein Muss ;)

      Löschen
  3. Super tutorial! Ich mag sowas immer sehr gerne, weil man mit solchen Kleinigkeiten den Blog direkt schöner macht :) Ich glaube ich versuche mich daran auch mal ;)

    AntwortenLöschen
    Antworten
    1. Danke :) Ja, ich beschäftige mich grade mit den 'kleinen Dingen' auch sehr gern. Bei dem Versuch, die Codes aber wirklich alle selbst zu schreiben würde ich wahnsinnig werden :D

      Löschen
  4. It's turorial time *wuhu*
    Ähm ja, eigentlich wollte ich nur sagen, dass der Kommentar so definitiv viel schöner aussieht - vor allem die pusteblume *.* Falls ich irgendwann mal genug Zeit habe, muss ich das unbedingt ausprobieren xD Danke sandy <3

    AntwortenLöschen
    Antworten
    1. Wuhu :D
      Die Pusteblume war definitiv ein Glücksfund, den ich auch noch sinnvoll habe umsetzen können - GANZ ALLEIN :D Ich freu mich wenn du dich freust ;) <3

      Löschen
    2. Yes, I did it xD Mission completed! :)
      Nochmal vielen Dank du HTML-Geni ;)

      Löschen
    3. Hast es ja im Endeffekt sogar alleine hingekriegt :P

      Löschen
  5. Das Tutorial gefällt mir auch richtig gut und wenn die ganzen Buchstaben und Zahlen mich nicht wieder vollständig auf die Palme bringen werden, freue ich mich schon das auszuprobieren.;D

    Liebe Grüße,
    Lynn

    AntwortenLöschen
    Antworten
    1. Ich vergesse manchmal, dass dieses ganze Zeug auch ganz schön verwirrend sein kann. Ist es für mich teilweise auch - von den Parts bei denen ich nix verstehe halte ich mich möglichst fern, ich hasse es, wenn ich etwas nicht verstehe :D - aber nach über einem Jahr in dem ich mich mal mehr mal weniger mit so Zeug beschäftigt habe, geht das ganz gut bei mir :) Wenn du dich nicht auskennst, kannst du mich ganz einfach fragen, aber das weißt du eh ;)

      Löschen
  6. Vielen Dank für dieses Tutorial.
    Nach einigem Gewurschtel hat jetzt alles geklappt.
    Wunderbar!

    Liebe Grüße
    Nici

    AntwortenLöschen
    Antworten
    1. Oh ja, das Gewurschtel ist auch mir bekannt! Ist total ärgerlich, aber danach ist die Freude, wenn es geklappt hat, umso größer. :)

      Löschen
  7. Oh Sandy, du bist genial! Ich hab das neulich selber ausprobiert und man sieht grad was dabei rausgekommen ist... nicht unbedingt sehr professionell xD Vor allem hab ich den Namen und das Datum nicht in den Kasten bekommen. Muss er jetzt aber erstmal so lassen wie es ist, weil ich keine Zeit habe :D

    Vielen Dank also und liebste Grüße! :)

    AntwortenLöschen
    Antworten
    1. Das kriegst du schon hin, kleines Paulchen. ^-^

      Löschen
    2. Habs geschafft. Und weil du so lieb um Feedback gebeten hast, hier meins: Ich fand das total einfach xD Einfacher als beim Seitenmenü. Und sehr übersichtlich und logisch. Hast du super gemacht, kleiner Sanddrachen (:

      Löschen
    3. Ohhh das tut meiner Seele gut *.* :D!

      Löschen
    4. Dacht ich mir doch :D
      Vielleicht hat's jemand schon erwähnt, mein Handy ist gerade verlegt und ich finde das auch gut so, also bin ich mal über kurz oder länger nicht aktiv in der Group ;D

      Löschen
  8. Ach man S, du hast immer die geilsten Tutorials *-* <3
    Werd ich mal ausprobieren, wenn ich Lust und Zeit hab xD

    Liebe Grüße!

    AntwortenLöschen
    Antworten
    1. Danke Mai Anh, das ist lieb von dir :* Grade die Zeit fehlt mir immer ... und WhatsApp-Smileys! Warum macht Blogger keine Kooperation mit WhatsApp? :D

      Löschen
  9. Woher hast du denn dieses scharfe Model aufgetrieben? ;)

    Ne, also: DANKE! Ich glaube, ich habe schon einmal erwähnt, wie schwer ich mir beim Kommentargestalten tue. Ich werd's versuchen, wenn ich freie Tage habe, sprich in 3 Tagen! *.*

    AntwortenLöschen
    Antworten
    1. Das ist mir zugelaufen - schwubs, auf einmal wars da. :D

      ICH MUSS IN DEN FREIEN TAGEN MATHE LERNEN! Ich hab am Mittwoch sa! Gnaaaa ... Ungerechte Welt!! Aber die viel Glück beim Rumwurschteln ;)

      Löschen
  10. Etwas spät, aber... Ich habe es jetzt auch mal versucht, aber irgendwie finde ich bei mir im HTML-Code einfach das /*Comments nicht :( Somit kann ich da auch nichts darunter einfügen... Weiß irgendjemand woran das liegen könnte oder wie ich das sonst hinbekommen könnte? Aber trotzdem tolles Tutorial :)

    AntwortenLöschen
    Antworten
    1. Hmm, du schaust aber schon sehr erfolgreich aus. Hast du es allein hingekriegt? :) Wenn so ein Unterpunkt nicht vorhanden ist, kannst du ihn auch einfach einfügen (bei mir ist zuerst /* Widgets, dann /* Posts und dann /* Comments). Aber, ohne jetzt gruselig wirken zu wollen, beim Forschen in deinem Quellcode hab ich eh ein /* Comments gefunden. :P

      Löschen
    2. Ist zwar über ein Jahr her, aber was solls :D
      Ich hatte das gleiche Problem, hab dann vorsichtig etwas ausprobiert und sobald ich direkt unter das
      /*Comments diese Linie
      ----------------------------------------------- */
      gesetzt habe, hat es dann auch funktioniert. Das war nämlich bei allen "Überschriften" wie /* Widgets, /* Posts etc. so.
      Und danke an Sandra, nach einigem Zurechtfinden in den ganzen Zahlen & Buchstaben kann ich jetzt mein gestyltes Kommentarfeld genießen :) Tolles Tutorial mal wieder!
      Liebe Grüße,
      Noemi

      Löschen
  11. Vielen lieben Dank für das super Tutorial!
    Zu Schritt 7 konnte ich mich bislang noch nicht durchringen, aber ansonsten hat alles super geklappt und sieht einfach nur toll aus!
    Freu mich schon aufs nächste Tutorial!
    LG
    Steffi

    AntwortenLöschen
    Antworten
    1. Kann ich verstehen, das schaut vielleicht ein bisschen kompliziert aus :) Freut mich dass sonst alles bei dir geklappt hat - ist ja eben doch keine Zauberei (sondern "nur" Technik *grusel*)!

      Löschen
  12. Aloha,

    wir haben deinen Beitrag auf unserer Facebookseite "blogARTig" veröffentlicht. Solltest du
    etwas dagegen haben, bitte laut schreien.

    Liebste Grüße
    blogARTig

    AntwortenLöschen
  13. Super Anleitung. Mein Kommentarfeld ist nun auch "gepimpt"

    AntwortenLöschen
    Antworten
    1. Schaut super aus, dezent aber doch (auch farblich) super zum Design passend :)

      Löschen
  14. Ein halbes Jahr später...

    ... Hab grad dein Tutorial entdeckt und finde das Kommentarfeld echt hübsch, allerdings kann ich nur die Codes rauslöschen, sodass die Linien nicht mehr da sind. Wenn ich dann aber weitermache, kann ich zwar die nächsten Codes einfügen, sehe aber weder abgerundete Bilder noch Punktelinie und das Datum ist auch nicht rechts! :/

    Ich hoffe, du kannst mir helfen! :)
    LG Kathi

    AntwortenLöschen
    Antworten
    1. Hast du die Codes an der richtigen Stelle eingefügt, oder vielleicht irgendwo einen Punkt oder einen Strichpunkt vergessen? Ich weiß, oft haut HTML nicht so hin wie man selbst will ... wenn wirklich nichts geht kannst du mich auch kurzzeitig als Administrator einladen damit ich selbst mein Glück versuchen kann!

      Löschen
  15. Liebe Sandra,

    ich wollte jetzt unbedingt dein Tutorial ausprobieren da ich gerade ein neues Design auf meinem Blog habe und das ohne diese tollen Kommentare ziemlich fad aussieht. Das ist schon das dritte Kommentar-Box Tutorial das ich ausprobiere aber es funktioniert irgendwie nicht. Ich bleibe immer am Anfang hängen. Irgendwas stimmt mit meinem HTML nicht.
    Wenn ich danach suche finde ich nur das hier:

    .comments .comments-content .loadmore a {
    background: $(content.background.color) $(content.background.gradient) repeat-x scroll top left;
    }



    /* Footer
    ----------------------------------------------- */
    .footer-inner {
    padding: 30px 0;
    overflow: hidden;
    }

    /* Mobile
    ----------------------------------------------- */
    body.mobile {
    background-size: $(mobile.background.size)

    Kann ich auch damit arbeiten, oder kann es sein das ich den Code nicht besitze. :o
    Das wäre wirklich meega lieb wenn du mir helfen könntest. (: ♥
    Wie immer ein tolles Tutorial!
    Ganz liebe Grüße,
    Jasi

    AntwortenLöschen
    Antworten
    1. Liebe Jasi,

      Das sieht doch wunderbar aus! In Schritt 2 löscht man Codes raus, die man nicht brauch, d.h. den Schritt kannst du dir ersparen (da du die Codes gar nicht hast). Die restlichen Codes würde ich so platzieren:

      .comments .comments-content .loadmore a {
      background: $(content.background.color) $(content.background.gradient) repeat-x scroll top left;
      }

      .comments .avatar-image-container, .comments .avatar-image-container img {
      width: 49px;
      max-width: 41px;
      height: 41px;
      max-height: 49px;
      background: #FFF;
      float: left;
      border-radius: 50%;
      -moz-border-radius: 50%;
      margin: 0 10px 0 0;
      }

      ... weitere Codes ...


      /* Footer
      ----------------------------------------------- */
      .footer-inner {
      padding: 30px 0;
      overflow: hidden;
      }


      Ich hoffe dass es hinhaut und ich dir ein bisschen helfen konnte!

      Löschen
  16. Vielen lieben Dank für dein tolles und wirklich sehr anschauliches Tutorial! Es war ganz einfach, deinen Anweisungen zu folgen und es hat prima geklappt :)

    Lg
    Levenya

    AntwortenLöschen
  17. Bei mir funktioniert das komplette Tutorial leider nicht. Die Bereiche, die ich mit Strg+f suchen muss, werden bei mir leider nicht gefunden. (Hab ich komischerweise immer bei Tutorials)..
    Sonst ist es echt voll süß :)

    AntwortenLöschen
    Antworten
    1. Hast du "richtig" gesucht? Seit dem neuen Editor muss man ein bisschen anders suchen: http://www.copypastelove.de/2013/06/suchen-finden-mit-dem-neuem-html-editor.html

      Aber ich weiß, dass der Editor manchmal spinnt, das regt mich selbst ganz fürchterlich auf. Du könntest es natürlich manuell versuchen (ist ja immer nur an der selben Stelle), was aber eine ziemliche Sucherei ist :/ Bei mir befindet sich das /' Comments etwa bei Zeile 460 und befindet sich im Teil zwischen <head> und </head>. Falls dir das weiterhilft. Wahrscheinlich eher nicht. ^^ Ich wünsch dir noch viel Erfolg.

      Löschen
  18. Danke für das tolle Tutorial! :D

    Funktioniert bei mir auch super, nur leider verschwindet immer wieder die Farbe aus dem Hintergrund der Kommentare... Sie ploppt beim Aufrufen auf, verschwindet dann aber wieder direkt und der Hintergrund wird weiß... Dabei hatte ich die Codes 1:1 übernommen. :/

    Liebe Grüße
    Noel

    AntwortenLöschen
    Antworten
    1. Bei mir funktioniert immer noch alles :/, aber ich weiß, welches Problem du meinst. Welchen Browser benutzt zu denn? Hast du es auch auf einem anderen Blog/Testblog ausprobiert und war es da genauso?

      Löschen
    2. Danke für die schnelle Antwort! :D

      War sehr ulkig dieses Problem, nachdem ich den Code für die abweichende Farbe von Autorkommentaren gelöscht hatte klappte es plötzlich... Vielleicht hatte ich ja versehentlich etwas vom Code gelöscht oder nicht vollständig kopiert. :/
      Ich hatte es auf einem Testblog ausprobiert mit der aktuellen Version von Firefox. :o

      Löschen
    3. Hihi, ist doch klar ^^ Hm nee, glaub ich eigentlich nicht dass du was falsch gemacht hast. Ich hab ja auch drin, dass meine Kommentare ohne Hintergrund angezeigt werden, und da ploppt zuerst der normale Style auf und wird dann weiß "überlagert". Stört mich auch irrsinnig, aber ich bin nicht Experte genug, um das geschwindigkeitstechnisch irgendwie zu verbessern oder so :D

      Löschen
  19. Hallo PusteBlume :) Vielen lieben Dank für das tolle Tutorial hier! Ich würde es auch gerne versuchen, muss vorher aber noch ein anderes Problem lösen. Leider weiß ich absolut nicht, wie ich es hinbekommen kann, das auf meinem Blog die Kommentarfunktion funktioniert, wenn Kommentare eingebetet sind. Sobald die Kommentare eingebettet werden, kann man nur unter Posts Kommentare verfassen, aber nicht auf Blogseiten, daher muss ich die Kommentare als Popup einblenden. Hast du vielleicht eine Idee? http://www.hoerbuchecke.eu/ ist der Problem-Blog. Soweit ich das einschätzen kann, liegt es leider am Design. Mit manchen anderen Vorlagen klappt es nämlich. Ich weiß aber nicht, was ich dafür ändern müsste.

    AntwortenLöschen
  20. Gerade wollte ich mir trotzdem schon einmal das Tutorial anschauen. Wenn ich nach /*Comments suche, finde ich aber leider nur das hier:
    }
    if (entry.link) {
    if (entry.link[2]) {
    comment.link = comment.permalink = entry.link[2].href;
    }
    if (entry.link[3]) {
    var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
    if (pid && pid[1]) {
    comment.parentId = pid[1];
    }
    }
    }
    comment.deleteclass = 'item-control blog-admin';
    if (entry.gd$extendedProperty) {
    for (var k in entry.gd$extendedProperty) {
    if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
    comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
    } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
    comment.displayTime = entry.gd$extendedProperty[k].value;

    Ich fürchte, ich kapier das nicht und/oder mein Design ist total verbaut :(

    Liebe Grüße,
    Lady Moonlight

    AntwortenLöschen
    Antworten
    1. Hey Lady Moonlight,

      Soweit ich das beurteilen kann, hast du auf deinen Blogspot-Blog ein Template von WordPress angewendet, auf dieser Plattform kenne ich mich leider kein Stück aus! Die angegebenen Stellen hab ich in meinem Code allerdings auch drin. Such doch mal nach /* Comments (mit Leerzeichen) :)

      Löschen
    2. Danke, hat mir viel geholfen und Nerven gespart!! ♥

      Löschen
  21. Vielen Dank für deine Antwort. Wenn ich /* Comments mit Leerzeichen eingebe, finde ich leider gar nichts. Das mit dem Wordpress-Template stimmt leider, es stand aber dabei, dass es auch für Blogger.com geeignet ist. Da kann man dann wohl leider nichts machen, vielleicht komme ich ja irgendwie noch drauf :)

    AntwortenLöschen
    Antworten
    1. Schade, dann weiß ich vorerst leider auch nicht leider ... Ich wünsche dir viel Erfolg!

      Löschen
  22. Liebe Sandra!

    Ich wollte das gerade so umsetzen, wie du es beschrieben hast .. aber bei mir ändert sich leider gar nichts dadurch :( .. ich hab den Code, wie bei Schritt 2 raus gelöscht und dann weiter gemacht .. aber nicht mal die Bilder wechseln von mir von eckig zu rund :( hast du vielleicht eine Idee?

    Hab jetzt mal meinen Code mit ein paar Zeilen vor- und nachher angehängt .. wäre super toll, wenn du mir helfen könntest!!

    Vielen vielen Dank und alles Liebe von

    Kathi

    www.kunterbuntekathi.blogspot.co.at

    #comments .avatar-image-container img {
    border: 1px solid $(image.border.color);
    }
    /* Comments

    .comments .avatar-image-container, .comments .avatar-image-container img {
    width: 49px;
    max-width: 41px;
    height: 41px;
    max-height: 49px;
    background: #FFF;
    float: left;
    border-radius: 50%;
    -moz-border-radius: 50%;
    margin: 0 10px 0 0;
    }

    .comments .comment-block, .comments .comment-thread.inline-thread .comment-block {
    background:#C4E7DC;
    border: 2px dotted #5e5e5e;
    padding:10px;
    position: relative;
    z-index: 2 !important;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    }

    .comment-header {
    padding-bottom: 8px;
    font-size: 110%;
    }

    .comments .comments-content .datetime {
    float: right;
    }

    .comment-actions{
    padding: 8px;
    margin-left: 435px;
    float: right;
    margin-top: -19px;
    }

    ----------------------------------------------- */
    .comments .comments-content .icon.blog-author {
    background-repeat: no-repeat;

    AntwortenLöschen
    Antworten
    1. Wenn du möchtest kannst du mich in deinen Blog einladen (sandcookiereloaded@gmail.com) und ich versuche die Felder so zu stylen, wie du möchtest :)

      Löschen
  23. Cooles Tutorial:) das ist doch als Blogger-Neuling mal was richtig Hilfreiches :)
    Ich mag deinen Blog und mir gefällt,wie du schriebst deswegen bin ich gleich mal Leserin geworden :D
    Wenn du magst schau vorbei : www.buch-junkie.blogspot.de

    AntwortenLöschen
  24. Schönes Tutorial, bei mir kann ich leider nicht mehr auf die Antwortfunktion klicken. Löschen geht aber antworten nicht mehr. Die Farbe bekomme ich irgendwie beim Antwortpost auch nicht geändert. Mein Blog: www.rabeasbeautytipps.com

    Ich wäre dir sehr dankbar wenn du mir helfen könntest

    AntwortenLöschen
    Antworten
    1. Kann es sein, dass das Problem mittlerweile nicht mehr besteht (was für ein Wunder bei der Zeitspanne)? Ich hab jetzt nicht gefunden, was du meinst. Sorry für die späte Antwort!

      Löschen
  25. EIn tolles Tutorial (jetzt habe ich runde Avatars - sehr schön), allerdings suchte ich nach einer anderen Problemlösung. Mein Kommentarfeld ist nicht groß genug, so dass man um an die "Veröffentlichen/Vorschau etc. Buttons" heranzukommen scrollen muss. Das gibt besonders beim Smartphone und Tablet wohl arge Probleme, beim Kommentieren - so berichten es Leser. Nun habe ich schon an allerlei Stellen in denen "Comment" im HTML Code auftaucht die Pixelgrößen verändert, aber es hat sich rein gar nichts getan. Hast du eine Idee?

    AntwortenLöschen
    Antworten
    1. Die Definition für das Kommentarfeld befindet sich leider in dem Teil des Quellcode-Kauderwelschs, den ich auch nicht verstehe. Den einzigen Tipp, den ich dir geben kann, ist, nach "comment-editor-src" zu suchen. Wenn ich bei width von 100 auf 200% erhöht habe, hat sich das Feld ganz schön in die Länge gezogen, bei height (was dich ja betrifft) hat sich allerdings bei Änderung nichts getan :/ Ich könnte dir nur raten, da vorsichtig herumzuexperimentieren (aber lade dir dein Template vorher runter, damit nichts kaputt gehen kann) :/

      Löschen
  26. Hab ich eigentlich auch schonmal ein Lob für deine Tutorials ausgesprochen? Bin gerade dabei, mein Design umzuwerfen und bastele jetzt an den Kommentarfeldern. Es wird! :D Vor allem den gepunkteten Rahmen finde ich toll :) Also vielen Dank, dass du das alles so idiotensicher erklärst, damit sogar HTML-Spacken wie ich das verstehen ;)

    Liebste Grüße
    MelMel

    AntwortenLöschen
    Antworten
    1. Vielen vielen Dank für dein Lob, Mel! ♥

      Löschen
    2. Ein super tolles Tutorial!
      Hat alles auf Anhieb geklappt bis auf eine Sache.
      Meine Kommentare (also nicht ein einzelner sondern alle) haben noch einen komplett grauen Hintergrund und ich weiß grad nicht wie ich den wegbekomm. Ich glaub das hängt irgendwie mit der Farbe der Fußzeile zusammen, aber ich find einfach nicht wie ich die Farbe ändern kann. Hätte das auch gerne weiß, so dass die Kommentare schön hervorgehoben werden.
      Du weißt nicht zufällig wo man das einstellt? :)
      Aber ansonsten wirklich super erklärt!

      Liebe Grüße,
      Lia

      Löschen
  27. Hallo Sandra,

    klappt bei mir leider gar nicht :-/ Ich verzweifel daran seit Tagen, habe jedes Kommentar durchgelesen und versucht und versucht *grummel*

    Mein Code sieht akutell so aus:

    */#comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: #999; }#comments-block { margin:1em 0 1.5em; line-height:1.6em; }#comments-block .comment-author { margin:.5em 0; }#comments-block .comment-body { margin:.25em 0 0; }#comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; }#comments-block .comment-body p { margin:0 0 .75em; }.deleted-comment { font-style:italic; color:gray; }#blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; }#blog-pager { text-align: center; }.feed-links { clear: both; line-height: 2.5em;}/* Sidebar Content-----------

    Egal wo ich es einfüge, da wird nichts rund.
    Hast du eine Idee welchen Code ich nehem kann, und wo genau er in dem Teil hin muss?

    Ich bin bisher immer mit allem klar gekommen, aber das Kommentarfeld sträubt sich hartnäckig gegen mich.
    Liebst, Nadine

    Nadine ♥

    Du kannst mir super gerne auch per Mail schreiben: herr.nadine(at)googlemail.com

    AntwortenLöschen
  28. Vielen Dank schonmal. Einiges hat geklappt, aber manches leider noch nicht. Es ist zum Verzweifeln. Gestern habe anhand deines Tutorials die Links zu meinen Seiten "gebaut", mit anderen Schriftarten, aber nimmt sie leider nicht an.

    Auch heute hat es geklappt, bis schritt 6, das Kommentar und das Kommentar von mir haben die gleiche Farbe, und meine Antwort hat einen grauen Kasten rundherum :(

    Vielleicht magst du mal vorbeischauen und mir sagen, wo ich noch WAS einfügen muss, damit ich überall die gleiche Schrift habe und die Farben unterschiedlich bekomme?

    buntegoere.blogspot.com oder mail an inamama76@gmail.com

    Vielen Dank schonmal,
    liebe Grüsse
    ina

    AntwortenLöschen
  29. Juchu! Es hat geklappt! Vielen Dank! Mein Kommentar von vorher hat sich inzwischen erledigt.

    LG
    Ina

    AntwortenLöschen
  30. Hallo,
    ich werkel auch gerade an meinem Blog und finde das Tut total hilfreich :-)
    Habe alles umgesetzt und es hat reibungslos geklappt. Allerdings suche ich noch nach einer Lösung für folgendes Problem:

    Ich möchte die Überschrift "Kommentare" gerne mittig haben, die Schrift anpassen (evtl. auch die Farbe) und eine Trennlinie unter der Überschrift. Außerdem hätte ich gerne die Nummerierung (z.B. 20 Kommentare) dazu. Leider finde ich keine Möglichkeit die Überschrift anzupassen, ich möchte auch das Wording ändern. Das habe ich über die Standard-Einstellungen bei Blogger probiert, aber ich kann eintragen was ich will, es bleibt immer das Wort "Kommentare" auf der Seite stehen, egal was ich eintrage und abspeichere.

    Kannst Du mir evtl. weiterhelfen?

    Vielen Dank und liebe Grüße
    Charlie

    AntwortenLöschen
    Antworten
    1. Deine Kommentare sehen toll aus!

      Lass mich nachdenken und kurz auf einem Testblog ausprobieren. Das sollte eigentlich gehen, wenn auch über Umwegen (Blogger ist ja leider nicht so kompatibel).

      Obwohl ich das ja sogar bei meinem eigenen Blog vorgenommen habe, konnte ich leider nicht mehr nachvollziehen, was ich da verändert habe :( Tut mir leid. Vielleicht fällt es mir noch ein.

      Löschen
  31. Hi Sandra,
    danke, habe ich nur Dank Deines Tutorials so gut hingekriegt :-)
    Falls Dir doch wieder einfällt, wie man die Überschrift anpasst, wäre es super wenn Du es posten würdest :-)
    Habe mich schon zu Tode gegoogelt, aber leider nichts dazu finden können ;-(

    Vielen Dank und liebe Grüße
    Charlie

    AntwortenLöschen
    Antworten
    1. Das freut mich! Ich werde in nächster Zeit ein Design für eine Freundin auf die Beine stellen. Da werd ich mich sicher auch mit dem Aussehen der Kommentare befassen - und wenn ich wieder weiß, wie das geht, werde ich dir schreiben.

      Löschen
    2. Hallo Charlie!

      Ich hab jetzt die Lösung für dein Problem! Und zwar folgende Zeile in deinem HTML-Code: h3.post-title, .comments h4 {. Du solltest die beiden Sachen allerdings aufspalten, weil dann der Posttitel denselben Style hat wie die Kommentare. Folgendes:

      .comments h4 {
      color: #CFA8E6;
      border-bottom: 1px solid #BFE6A8;
      text-align: center;
      font-size: 30px;
      font-family: Courier;
      }


      Hier ein Generator für die Farben: http://www.colorpicker.com/
      Hier das Tutorial für das Anzeigen der vollständigen Kommentaranzahl: http://pusteblumeasdf.blogspot.de/2012/10/vollstandige-kommentaranzahl-wieder.html
      Wenn du eine Schriftart verwenden willst, die nicht von Blogspot bereitgestellt wird, auch hier ein Tutorial: http://www.copypastelove.de/2011/11/schriftart-bei-posttitel-andern.html
      Schritt 4 brauchst du dabei nicht. Sobald du den Link mit dem / im Code hast, kannst du bei font-family den Namen der Schrift eingeben.

      Ich hoffe, ich konnte dir helfen und dass es klappt!

      Löschen
  32. Hey Sandra,
    Du bist ein Held, vielen vielen Dank :-)
    Hat super funktioniert und jetzt passt die Überschrift + Trennlinie endlich zum Rest :-)
    Das mit dem Zähler habe ich noch nicht so ganz hingekriegt, aber da werde ich mich am kommenden WE noch einmal dran machen. Ist aber nicht so extrem wichtig, weil die Kommentare auch im Footer gezählt werden.

    Nochmals vielen Dank :-)

    LG,
    Charlie

    AntwortenLöschen
    Antworten
    1. Gerne, das freut mich sehr! Falls es nicht klappen will, einfach "blogspot kommentare anzeigen tutorial" googlen. Vielleicht findest du einen Post, wo es anschaulicher oder anders erklärt wird. :)

      Löschen
  33. Hallo! (:

    Schönes tutorial, leider scheitere ich schon an schritt 3.. ):
    Irgendwie wird es mehr so ne art... eierform. Hast du vielleicht ne idee wie ich das richtig machen kann? xD

    Grüße! (:

    AntwortenLöschen
    Antworten
    1. Hey Juhle, du hast dein Profil nicht freigegeben, sodass ich mir das Problem nicht anschauen kann. Nur durch die Beschreibung kann ich dir leider nicht wirklich helfen.

      Löschen
  34. AAAAAH WIE GEIL!
    Nach genau diesem Tutorial habe ich schon eine Ewigkeit gesucht!
    Das war genau das, was ich gebraucht habe! :)
    Dankedankedanke!
    Liebste Grüße, Nele
    nureinfoto.blogspot.de

    AntwortenLöschen
  35. Ein super Tutorial^^ Doch ich habe noch ein kleines Problem.... Bei mir ist um den Kommentaren, also die Kommentarbox grau und das stört :´( Kannst du mir vielleicht weiterhelfen? Hier ist ein Beispielpost, bei dem man das ganz gut sehen kann: http://www.blogvonmiri.blogspot.de/2015/11/rebuy.html#more

    AntwortenLöschen
  36. Hallo,

    ich habe mich schon eine ganze Zeit lang gefragt, wie andere Blogger das mit dem Kommentarfeld hinbekommen haben.
    Und von einem wurde ich dann zu deinem Tutorial geschickt.

    Ich habe es jetzt ausprobiert und es hat super geklappt. Vielen Dank für das tolle Tutorial :)

    Liebe Grüße
    Victoria

    AntwortenLöschen
    Antworten
    1. Das freut mich, dass du hierher gefunden hast :)

      Löschen
  37. Vielen, vielen Dank!
    Habe mich gerade durch deine ganzen Kommentar- Tutorials gearbeitet und bin mega glücklich!

    Tadaaaaaa:
    http://marys-buecherwelten.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Freut mich, dass du jetzt so zufrieden bist! Dankeschön für dein Feedback!

      Löschen
  38. Hey Sandra!
    Klasse Tutorial, habe alles verstanden :) Freue mich sehr, dass ich auch mal einen schönen Kommentarbereich habe :D
    Vielleicht hättest Du an manchen Schritten noch kurz erklären können, wohin die Codes eingefügt werden müssen - das war mir nicht immer ganz klar, hat aber geklappt :D
    Vielen vielen lieben Dank nochmal!

    LG Marian

    AntwortenLöschen
    Antworten
    1. Vielen Dank für deine Kritik, ich hab versucht es jetzt ein wenig zu ändern :)

      Löschen
  39. Hi :)

    sehr verständliches Tutorial, hat super bei mir geklappt :)
    Aber 2 Fragen hätte ich noch:
    Wie kann ich die Farbe der Kommentare, also des geschriebenen ändern? Bei mir wird die gleiche Schriftfarbe, wie die in meinen Posts angezeigt.. Die Farbe sieht man auf meinem gewählten Farbhintergrund nicht :( In der Vorlage gibt es dazu leider auch nichts zu finden..

    Meine 2. Frage ist, ob man sogar auch das Feld in dem die Kommentare geschrieben werden ändern kann :D Wahrscheinlich nicht oder?

    Liebe Grüße, Charlotte

    AntwortenLöschen
    Antworten
    1. Ich bin mir ziemlich sicher, dass man die Schriftfarbe iiirgendwie manuell ändern kann, aber so weit reicht mein Wissen leider nicht! Und nein, das Kästchen in das man reinschreibt kann man leider nicht ändern, hab ich auch schon mal versucht :/

      Löschen

Ich schätze es sehr, dass du dir die Zeit nimmst und die Mühe machst, mir deine Meinung oder dein Feedback zu hinterlassen! Ist der Beitrag schon etwas älter, wird dein Kommentar nicht gleich sichtbar sein, sondern muss zuerst von mir freigegeben werden.

© 2012 - 2016 Pusteblume? · Powered by Blogger · Datenschutz · Impressum