Kommentar-Avatar rund gestalten ♥


Ich bevorzuge lieber runde Avatare unter meinen Kommentaren, die sehen viel einheitlicher und weicher aus. Ihr seid der selben Meinung? Dann sollte euch dieses Tutorial nützlich sein.


1. Öffnet euren Dashboard. Geht auf Vorlage und öffnet das HTML.

2. Sucht nach ]]></b:skin> , direkt darüber fügt ihr folgendes ein:

.comments .avatar-image-container {
float: left;
max-height: 36px;
overflow: hidden;
width: 36px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
}
  • Wenn die Bilder nicht perfekt rund werden, könnt ihr die roten Zahlen abändern, bis es gut aussieht.
  • Funktioniert nicht? Dann sucht nach .avatar-image-container und fügt folgendes zwischen die {}-Klammer ein:
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;


3. Speichern und fertig!

116 116 Kommentare

  1. das funktioniert bei mir aber nicht. leider. :(

    AntwortenLöschen
    Antworten
    1. bei mir hat es dann doch noch funktioniert- allerdings musste ich es an einer anderen stelle einfügen.
      könntet ihr von cpl vielleicht mal ein tutorial machen, wie man dieses "Sticky Scroller" hinbekommt. ich würde das zu gerne auf meinem blog machen, aber die ganzen anleitungen sind nur unverständlich (und auf englisch). :)

      Löschen
    2. An welcher Stelle muss man das dann einfügen?

      Löschen
    3. Ja, an welcher? Bei mir funktioniert es leider auch nicht.

      Löschen
    4. Ich schließe mich ebenfalls an haha xD

      Löschen
    5. Bei mir funktioniert es auch nicht..
      bitte die Stelle wo wir es einfügen müssen! :)

      LG Bel
      maedchenregeln.blogspot.de

      Löschen
    6. Vielen Dank für das Update! :)
      Eine Frage habe ich allerdings noch: Wie schaffe ich es, dass die Avatare auch im Pop-up Fenster rund sind? Oder funktioniert das nicht?
      Ich bitte um Antwort! :D

      Liebste Grüße
      Anja von chemin du paradis

      Löschen
    7. Ihr müsst nach " .post blockquote { " suchen & es darüber einfügen. So hat's dann bei mir geklappt (:

      Löschen
  2. Danke, habs sofort ausprobiert und funktioniert super :)

    AntwortenLöschen
  3. nops, bei mir funktioniert es auch nicht!

    AntwortenLöschen
  4. Vielen Dank! Hat super geklappt und sieht gleich viel besser aus! :)

    AntwortenLöschen
  5. Vielen Dank klappt super :)

    http://lilalou88.blogspot.de/

    AntwortenLöschen
  6. wow, tolles tutorial & es hat super funktioniert :)
    ich liebe rund zugeschnittene fotos und in den kommentaren sieht das auch richtig toll aus. also danke für das tutorial!

    AntwortenLöschen
  7. Hat bei mir nicht funktioniert... schade :/

    AntwortenLöschen
  8. Hab ich direkt ausprobiert & es hat geklappt (:

    wirklich toll (:

    Liebst,
    Aileen <3

    AntwortenLöschen
  9. Könntet ihr vielleicht mal ein Tutorial dazu machen, wie man in der Sidebar eigene Bilder für die Überschriften verwenden kann? Oder ist das zu kompliziert?
    Ich finde das viel schöner und individueller, leider finde ich nirgendwo etwas, wie ich da vorgehen muss... . Wäre super :)

    AntwortenLöschen
    Antworten
    1. Dafür existiert auf jeden Fall schon ein Tutorial, ich hatte das zeitweise mal bei mir umgesetzt.

      Löschen
    2. Dann werde ich mal suchen. Danke! :)

      Löschen
  10. Das hat super geklappt, danke :) Und oh, da bin ja ich, haha.

    AntwortenLöschen
  11. Danke Danke Danke, auch bei mir hat's geklappt und sieht toll aus :)

    AntwortenLöschen
  12. cool DANKE :) <3
    Ihr seid super!!!!

    AntwortenLöschen
  13. Wuhu, bei mir hat's auch geklappt :))

    AntwortenLöschen
  14. bei mir ist das ganze nicht komplett rund, könntet ihr mir erklären was die einzelnen Zeilen sind und was sie verändern? :)

    AntwortenLöschen
    Antworten
    1. du musst wie oben genannt die roten zahlen ändern :) probiers mal aus... ich kuck eben mal für dich, welche ich letztendlich verwendet hab :)

      Löschen
  15. Vielen lieben Dank, hat super geklappt! :)

    AntwortenLöschen
  16. Bei mir hat sich durch den Code leider nichts verändert -.-

    AntwortenLöschen
  17. Hat direkt geklappt. Super ! Vielen Dank :-)

    AntwortenLöschen
  18. Dankeschön für den Tipp! Funktioniert wunderbar!

    AntwortenLöschen
  19. Oha super, es hat sofort funktioniert :)

    AntwortenLöschen
  20. Dankeschön. Hat super geklappt :)

    AntwortenLöschen
  21. danke, dass ihr das hier so gleich umgesetzt habt.
    war ja eine frage gestern von mir, wie man das macht.
    ihr seid ja echt schnell ;-)
    offensichtlich haben doch viele interesse an runden kommi-pics.

    genau den code hatte ich mir auch "gezogen", hab ihn aber an eine andre stelle eingefügt.
    (strg. + f ausführen, geht ein suchfeld auf, dort...comments...schreiben.
    so gelangt ihr am schnellsten zum gewünschten eingabe-feld.)
    weiter gehts hier.........

    im bereich........./* Comments
    direkt über......../* Accents, den code einfügen

    die, bei denen es, wie oben angegeben, NICHT klappt, können es ja mal so versuchen.
    bei mir gehts auf versch. blogs so.

    grüßle flo

    AntwortenLöschen
    Antworten
    1. funktioniert jetzt bei mir - danke :-)

      Löschen
    2. bei mir hat auch das nix gebracht :(

      Löschen
    3. Schließe mich MissCocoGlam an ... hat mir auch nichts gebracht. :(

      Löschen
    4. bei mir hat es so auch geklappt, bei mir stand zwar nirgendwo Accents, ich hab es einfach beim Bereich */ Comments und über */ Footer eingefügt ;)

      Löschen
  22. Ich flipp aus - es hat auf anhieb funktioniert.. ich bin wirklich begeistert. Vielen Dank für diese geniale Idee. :)

    www.blog-katu.blogspot.de

    AntwortenLöschen
    Antworten
    1. Ich habe euch in meinem letzetn Beitrag (Info Blog Veränderung) markiert - für diese tolle Idee. :)

      http://blog-katu.blogspot.de/

      Löschen
    2. bei mir hat es auch auf anhieb funktioniert, danke!!
      der blog (und die blogger dahinter) ist super :-*

      Löschen
  23. :) Es funktionierte nicht wie beschrieben, ich musste es im comment bereich einfügen :)

    AntwortenLöschen
    Antworten
    1. danke für den tipp. jetzt funzt es auch bei mir!

      ♥liche grüße, doro K.

      Löschen
  24. Das funktionier super!
    Danke schön :)

    AntwortenLöschen
  25. das ging ratz fatz und drin hatte ich's ;-)) DANKESCHÖN! ihr seit toll.

    AntwortenLöschen
  26. funktioniert leider nicht :( könnte mir jemand vllt. den code zuschicken, wie es aussieht wenn man das dann darüber eingefügt hat. also nur das stück, vllt. habe ich auch einfach nur was falsch gemacht.

    AntwortenLöschen
    Antworten
    1. schau doch bitte mal hier..........

      http://flo-rundum.blogspot.de/2013/02/blog-helferlein-runde-kommi-pics.html
      ich hab da eine hard-kopy mit eingefügt, da kannst du sehen wo ich den code eingefügt habe.

      ich hoffe, es nützt nen bissle was

      Löschen
  27. Danke, hat geklappt. :-)
    Bei mir gibt es auch nur eine Stelle mit dem Code, wo ich das einfügen könnte.

    AntwortenLöschen
  28. Danke, hat super geklappt. Ich finde eure Tipps und Info klasse.
    GLG
    Jeannette

    AntwortenLöschen
  29. Hat bei mir nicht geklappt. Ich hab den Code wieder gelöscht.
    Was heißt: "im Comment-Bereich einfügen" ???
    Smilies konnte ich übrigens auch nicht einfügen. Und es war recht umständlich, alles wieder zu entfernen.
    Schade.
    Ursel

    AntwortenLöschen
  30. ich liebe eure seite einfach :D da findet man immer was mit dem man seine seite noch etwas "aufpimpen kann" danke :D

    AntwortenLöschen
  31. Hat wunderbar funktioniert, vielen Dank (:

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

    AntwortenLöschen
  33. Bei mir funktioniert es auch immernoch nicht :(

    AntwortenLöschen
  34. funktioniert bei mir problemlos, vielen vielen dank :)! sieht echt klasse aus :))

    liebe grüße :)xx

    pia

    http://i-am-a-little-bit-like-this.blogspot.de/

    AntwortenLöschen
  35. bei mir hats funktioniert ;-)
    danke !

    AntwortenLöschen
  36. Bei mir hat das funktioniert:)
    danke <3

    AntwortenLöschen
  37. Hi ihr!
    Also bei mir hat es sofort funktioniert - danke für die ANleitung!
    Allerdings ist es nicht wirklich richtig rund, nun habe ich aber alle möglichen Zahlen ausprobiert. Nichts klappt. Habt ihr nen Tipp?
    DANKE!

    GLG Louise

    AntwortenLöschen
  38. Hat bei mir super geklappt ( ich benutze die minima vorlage )
    & das ist ein super tolles Tutorial :-)

    AntwortenLöschen
  39. Danke für diese Idee, sieht super süß aus und ich liebe es. Vielen dank, diese HTML TIpps helfen mir als HTML Unwissender unmengen weiter und geben meinem Blog diese kleinen Extras die ich so sehr wollte. Vielen Vielen Dank.

    Eure Nana

    AntwortenLöschen
  40. hat prima funktioniert...allerdings trotz ausprobieren aller möglicher Zahlen...nicht ganz rund. Aber was solls. Bella

    Mein herzensüßer Blog

    AntwortenLöschen
  41. Geht leider beides nicht bei mir. Den zweiten Code gibt es bei mir gar nicht. HILFE?!

    AntwortenLöschen
  42. Ich würde das wirklich gerne machen, aber bei mir geht das nicht, weil ich nicht das normale kommentarfeld von blogger habe, sondern da mal ein anderes mit html gemacht habe. da hatte ich das tutorial von einer website. denn damals als das antworten von blogger kam, kam es auf meinem blog nicht, deswegen habe ich dann ein neues kommentarfeld gemacht. und wenn ich jetzt die bilder rund mache hab ich noch einen viereckigen rahmen und ein graues viereck darunter..ich weiß leider nicht wie ich das weg bekommen kann :(

    lg Lary
    lary-tales.blogspot.de

    AntwortenLöschen
  43. Hat bei mir zuerst auch nicht funktioniert. Habe den Code jetzt einfach unter #comments h4 {...} eingefügt. Jetzt klappt alles und sieht super aus! :)

    AntwortenLöschen
  44. Ich bin dir so Dankbar, das du mir mit deinen Tipps so gut hilfst, meinen Blog noch etwas schöner zu machen.
    Liebe Grüsse
    Biene

    AntwortenLöschen
  45. Ich bin so dankbar, dass ihr das so wunderbar erklärt, dass auch ich da verstehe, weil ich kenn mich HTML überhaupt nicht aus :) Hat bei mir echt super geklappt :)
    Liebe Grüß0e
    Isy
    sea-of-daydreams.blogspot.de

    AntwortenLöschen
  46. Die 2te Lösung hat bei mir geklappt :) Vielen Dank für Eure tollen Tutorials, mein Blogdesign wird dadurch von Tag zu Tag besser! Ein fettes Dankeeeeschön & Riesenlob schickt Euch Miriam

    AntwortenLöschen
  47. Danke für das doch sehr leichte Tutorial.
    Hat bei mir auf Anhieb geklappt!

    Einen schönen Tag Dir

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

    AntwortenLöschen
  49. oh und zusätzlich... die genannten "Suchwörter" im Post gibt es nicht in meinem HTML Code... und ich verzweifle immermehr :(

    AntwortenLöschen
    Antworten
    1. ich hab sogar extra einen neuen Blog angelegt -.-
      hat hier sonst NIEMAND das Problem ? :(

      Löschen
    2. AN ALLE die das gleiche Problem hatten/haben:

      - nochmals HTML Anzeige öffnen
      - alle "dreiecke" bei der "Zeilennummerierung" öffnen
      - normales vorgehen

      lg Sophie :)

      Löschen
    3. Hey Sophie :D,
      Ich hab genau das gleiche Problem wie du! Das mit den "Suchwörtern" klappt auch bei mir nicht...
      Das ist echt doof...
      Falls jemand was weiß, lasst es mich wissen :D
      LG Anna

      Löschen
    4. habe das gleiche problem!!

      Löschen
  50. was bedeutet denn 'und fügt folgendes zwischen die {}-Klammer ein' genau ? Welche Klammern sind gemeint ? Ich würde mich sehr über einen Screenshot u.ä. freuen, da bei mir einfach nichts klappt :(

    AntwortenLöschen
  51. Das funktioniert bei mir einfach nicht :(

    AntwortenLöschen
  52. ich finde es in meinem html nicht :o

    AntwortenLöschen
  53. Bei mir hats auch funktioniert, es lassen sich nur leider die Zahlen nicht ändern.
    Danke für die Anleitung und Liebe Grüße!

    AntwortenLöschen
  54. bei mir klappt sie suche seit dem neuen design überhaupt nicht mehr... der findet nie was... was mache ich falsch???nicoles.briefkasten@web.de

    AntwortenLöschen
    Antworten
    1. http://www.copypastelove.org/2013/06/suchen-finden-mit-dem-neuem-html-editor.html

      Löschen
    2. supi das ist geklärt :) funktioniert aber leider nicht, hab alles mögliche ausprobert =(

      Löschen
  55. Wirklich super :)
    Klappt perfekt und ist wirklich einfach!!

    AntwortenLöschen
  56. klasse!
    http://papillonfully.blogspot.de/

    AntwortenLöschen
  57. hat auf anhieb funktioniert - vielen dank :)

    AntwortenLöschen
  58. Hat bei mir auch gleich funktioniert. Super!

    http://www.marionsgenusskueche.blogspot.de/

    AntwortenLöschen
  59. Hey ich hab da ein Problem ich hab alles richtig gemacht nur irgendwie
    ist mein Kommentar Avatar rund geh ich aber mit dem Mauszeiger drüber wird es wieder
    Rechteckig

    AntwortenLöschen
  60. Hat super geklappt :) ♡

    Ihr habt mir schon super oft geholfen, Danke!

    http://lamiracosmetics.blogspot.de/

    AntwortenLöschen
  61. hat super funktioniert! deine seite ist toll! <3

    AntwortenLöschen
  62. Kriegt man das auch mit dem Über Mich Bild hin? Dass es dann auch rund ist? Hat Jemand einen Tipp? LG Lena :)

    AntwortenLöschen
  63. yay!
    Ich LIEBE diesen Blog. Genau richtig für DAUs wie mich, die auf "fertigen Code" (oder wenigstens gut erklärten!) angewiesen sind.
    Danke!!!
    So kann der Frühjahrsputz vor der Wiederbelebung weitergehen!

    AntwortenLöschen
  64. Egal wie ich die Zahlen ändere, die Avatare werden nicht rund..:/
    Welche Zahlen habt ihr denn genommen?

    AntwortenLöschen
    Antworten
    1. Der Wert für Border-Radius sollte optimalerweise etwas größer als die Breite bzw. Höhe des Bildes sein :)

      Löschen
  65. Danke für das Tutorial, hat super geklappt! ❤

    AntwortenLöschen
  66. Bei mir im Blog sieht man keinen einzigen Avatar, ich weiß einfach nicht wie das funktioniert :(

    AntwortenLöschen
  67. Yes mit der zweiten Variante hates hingehauen. Sieht echt viel schöner aus.
    Danke
    susanne

    AntwortenLöschen
  68. Ganz lieben Dank für dieses Tutorial!! Ich fand das auf anderen Seiten schon immer so toll und jetzt hab ich es auch!!

    Aber: leider ist es nicht ganz rund geworden. Habe auch schon an den Zahlen rumgespielt, aber nix hat geklappt.
    Hat jemand einen Tipp für mich dazu? Das wäre toll!!

    Ganz liebe Grüße
    Nadja

    AntwortenLöschen
  69. ich würd das so gerne ausprobieren, aber es findet die Zeilen nicht :(

    AntwortenLöschen
  70. Hallo. ich weis leider nicht mal wie ich das Bild überhaupt neben mein Kommentar bekomm :( es wird immer das Blogger Logo angezeigt. kannst du mir da vielleicht weiterhelfen. DANKE

    AntwortenLöschen
  71. Hallo zusammen,
    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, auch nicht nach anpassen der Zahlen.
    Hat jemand eine Idee welchen Code ich nehem kann, und wo genau er in dem Teil hin muss?

    Die beiden im Tutorial genannten Optionen haben ebenfalls keinen Effekt.
    Liebst, Nadine

    von http://misshappyreading.blogspot.de/

    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.