Tipps & Tutorials, tutorial

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!

115 Comments

  1. gerrit.

    2. February 2013 at 13:16

    das funktioniert bei mir aber nicht. leider. 🙁

    1. gerrit.

      2. February 2013 at 13:41

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

    2. Anja

      2. February 2013 at 13:57

      An welcher Stelle muss man das dann einfügen?

    3. Anonym

      3. February 2013 at 11:21

      Ja, an welcher? Bei mir funktioniert es leider auch nicht.

    4. Jenny

      3. February 2013 at 13:14

      bei mir auch nicht ! 🙁

    5. Thanh Mai Tan

      3. February 2013 at 17:57

      Ich schließe mich ebenfalls an haha xD

    6. Bel Maedchenregeln

      4. February 2013 at 20:05

      Bei mir funktioniert es auch nicht..
      bitte die Stelle wo wir es einfügen müssen! 🙂

      LG Bel
      maedchenregeln.blogspot.de

    7. Anja

      8. February 2013 at 22:17

      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! 😀

      Liebste Grüße
      Anja von chemin du paradis

    8. Sany Noname

      7. July 2013 at 13:31

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

  2. Jojo

    2. February 2013 at 13:37

    Danke, habs sofort ausprobiert und funktioniert super 🙂

  3. Maikel

    2. February 2013 at 13:37

    nops, bei mir funktioniert es auch nicht!

  4. Karmesin

    2. February 2013 at 13:39

    Hat geklappt, vielen Dank!

  5. Sarah.

    2. February 2013 at 13:39

    Vielen Dank! Hat super geklappt und sieht gleich viel besser aus! 🙂

  6. Chérie

    2. February 2013 at 13:54

    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!

  7. M E L O D Y

    2. February 2013 at 13:55

    Hat bei mir nicht funktioniert… schade :/

  8. Aileen

    2. February 2013 at 14:01

    Hab ich direkt ausprobiert & es hat geklappt (:

    wirklich toll (:

    Liebst,
    Aileen <3

  9. MissK

    2. February 2013 at 14:17

    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 🙂

    1. Pussybat

      2. February 2013 at 15:57

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

    2. MissK

      2. February 2013 at 17:08

      Dann werde ich mal suchen. Danke! 🙂

  10. Maho

    2. February 2013 at 14:30

    Das hat super geklappt, danke 🙂 Und oh, da bin ja ich, haha.

  11. Mioli

    2. February 2013 at 15:02

    Danke Danke Danke, auch bei mir hat's geklappt und sieht toll aus 🙂

  12. lovely

    2. February 2013 at 15:03

    cool DANKE 🙂 <3
    Ihr seid super!!!!

  13. Pia

    2. February 2013 at 15:07

    Hat geklappt! Danke! ♥

  14. CherryPuke

    2. February 2013 at 15:13

    Hat funktioniert, vielen Dank 🙂

  15. Naninana

    2. February 2013 at 15:35

    cool, hat geklappt 🙂

  16. Felise

    2. February 2013 at 17:08

    Oh, danke, es hat geklappt:)

  17. Cindy

    2. February 2013 at 17:38

    Hat bestens funktioniert 😀

  18. Anonym

    2. February 2013 at 17:54

    Wuhu, bei mir hat's auch geklappt :))

  19. Céline

    2. February 2013 at 18:06

    bei mir ist das ganze nicht komplett rund, könntet ihr mir erklären was die einzelnen Zeilen sind und was sie verändern? 🙂

    1. Anonym

      28. April 2013 at 13:25

      du musst wie oben genannt die roten zahlen ändern 🙂 probiers mal aus… ich kuck eben mal für dich, welche ich letztendlich verwendet hab 🙂

  20. Amor and Psyche

    2. February 2013 at 18:15

    Vielen lieben Dank, hat super geklappt! 🙂

  21. ♥ M i s s C o c o G l a m ♥

    2. February 2013 at 18:59

    Bei mir hat sich durch den Code leider nichts verändert -.-

  22. Lena

    2. February 2013 at 19:13

    Hat direkt geklappt. Super ! Vielen Dank 🙂

  23. Mia Alabaster

    2. February 2013 at 19:16

    Dankeschön für den Tipp! Funktioniert wunderbar!

  24. Jessi

    2. February 2013 at 19:40

    Oha super, es hat sofort funktioniert 🙂

  25. Doreen :)

    2. February 2013 at 19:46

    Dankeschön. Hat super geklappt 🙂

  26. ⒻⓁⓄ-❀

    2. February 2013 at 19:52

    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

    1. Jenny

      4. February 2013 at 9:18

      funktioniert jetzt bei mir – danke 🙂

    2. ♥ M i s s C o c o G l a m ♥

      4. February 2013 at 11:32

      bei mir hat auch das nix gebracht 🙁

    3. Anonym

      3. March 2013 at 21:39

      Schließe mich MissCocoGlam an … hat mir auch nichts gebracht. 🙁

    4. Jule

      4. January 2014 at 13:11

      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 😉

  27. K. D.M.

    2. February 2013 at 20:03

    Ich flipp aus – es hat auf anhieb funktioniert.. ich bin wirklich begeistert. Vielen Dank für diese geniale Idee. 🙂

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

    1. K. D.M.

      3. February 2013 at 13:04

      Ich habe euch in meinem letzetn Beitrag (Info Blog Veränderung) markiert – für diese tolle Idee. 🙂

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

    2. Spruso

      15. February 2013 at 20:12

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

  28. Mademoiselle L.

    2. February 2013 at 20:27

    🙂 Es funktionierte nicht wie beschrieben, ich musste es im comment bereich einfügen 🙂

    1. Doro Kaiser

      2. February 2013 at 20:56

      danke für den tipp. jetzt funzt es auch bei mir!

      ♥liche grüße, doro K.

  29. Christina.

    2. February 2013 at 20:50

    Das funktionier super!
    Danke schön 🙂

  30. Lydia

    3. February 2013 at 10:18

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

  31. Jenny

    3. February 2013 at 10:46

    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.

    1. ⒻⓁⓄ-❀

      3. February 2013 at 20:14

      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

  32. Anonym

    3. February 2013 at 11:54

    Danke, hat geklappt. 🙂
    Bei mir gibt es auch nur eine Stelle mit dem Code, wo ich das einfügen könnte.

  33. Vreni82

    3. February 2013 at 11:56

    toll, danke funktioniert 🙂

  34. Rabenohr

    3. February 2013 at 12:14

    Danke, hat super geklappt. Ich finde eure Tipps und Info klasse.
    GLG
    Jeannette

  35. Vanessa

    3. February 2013 at 13:57

    ihr habt so tolle tutorials! 🙂

  36. Die Rabenfrau

    3. February 2013 at 22:28

    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

    1. Mira Ho

      3. February 2013 at 23:45

      Wo steht denn "im Comment-Bereich einfügen"?

  37. Nastja

    7. February 2013 at 12:16

    Dankeeee hat super geklappt!

  38. Ina

    9. February 2013 at 8:44

    ich liebe eure seite einfach 😀 da findet man immer was mit dem man seine seite noch etwas "aufpimpen kann" danke 😀

  39. Fanny

    9. February 2013 at 14:58

    bei mir funktioniert es immer noch nicht. hab alles befolgt was ihr gesagt habt. X(

  40. Anna

    10. February 2013 at 13:43

    Hat wunderbar funktioniert, vielen Dank (:

  41. Anonym

    13. February 2013 at 19:25

    Bei mir funktioniert es auch immernoch nicht 🙁

  42. Pia

    13. February 2013 at 19:50

    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/

  43. Ronja

    15. February 2013 at 14:23

    bei mir hats funktioniert 😉
    danke !

  44. missmy

    19. February 2013 at 15:28

    Bei mir hat das funktioniert:)
    danke <3

  45. Anonym

    21. February 2013 at 9:13

    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

  46. Laura

    24. February 2013 at 14:48

    Hat bei mir super geklappt ( ich benutze die minima vorlage )
    & das ist ein super tolles Tutorial 🙂

  47. Nana

    24. February 2013 at 22:16

    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

  48. Bella

    1. March 2013 at 19:15

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

    Mein herzensüßer Blog

  49. Anonym

    3. March 2013 at 21:28

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

  50. Lary // Lary-Tales

    7. March 2013 at 17:57

    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

  51. Luisa

    16. March 2013 at 20:52

    Hat bei mir zuerst auch nicht funktioniert. Habe den Code jetzt einfach unter #comments h4 {…} eingefügt. Jetzt klappt alles und sieht super aus! 🙂

  52. Sabine Musacchio

    19. March 2013 at 11:40

    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

  53. Isy

    23. March 2013 at 15:38

    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

  54. Miriam Nowak

    29. March 2013 at 17:21

    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

  55. Wolf Niklas

    4. April 2013 at 6:56

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

    Einen schönen Tag Dir

  56. Anonym

    28. April 2013 at 12:19

    oh und zusätzlich… die genannten "Suchwörter" im Post gibt es nicht in meinem HTML Code… und ich verzweifle immermehr 🙁

    1. Anonym

      28. April 2013 at 12:38

      ich hab sogar extra einen neuen Blog angelegt -.-
      hat hier sonst NIEMAND das Problem ? 🙁

    2. Anonym

      28. April 2013 at 13:18

      AN ALLE die das gleiche Problem hatten/haben:

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

      lg Sophie 🙂

    3. Anna

      19. May 2013 at 19:17

      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 😀
      LG Anna

  57. Jenny

    23. May 2013 at 13:54

    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 🙁

  58. Viola

    24. May 2013 at 18:57

    Das funktioniert bei mir einfach nicht 🙁

  59. Antonia Bamberger

    26. May 2013 at 11:05

    ich finde es in meinem html nicht 😮

  60. Lena

    26. May 2013 at 20:01

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

  61. Nicole von Herzideen

    6. June 2013 at 12:08

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

    1. Nicole von Herzideen

      6. June 2013 at 20:26

      supi das ist geklärt 🙂 funktioniert aber leider nicht, hab alles mögliche ausprobert =(

  62. Anonym

    1. July 2013 at 15:32

    Wirklich super 🙂
    Klappt perfekt und ist wirklich einfach!!

  63. Lisa

    1. August 2013 at 15:32

    Perfekt, Dankeschön! 🙂

  64. Johanna

    10. August 2013 at 17:36

    hat auf anhieb funktioniert – vielen dank 🙂

  65. Jasmin Hilla

    24. September 2013 at 12:21

    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

  66. Lamira Bloggt

    24. December 2013 at 10:39

    Hat super geklappt 🙂 ♡

    Ihr habt mir schon super oft geholfen, Danke!

    http://lamiracosmetics.blogspot.de/

  67. Kia OneTwoThree

    24. January 2014 at 2:19

    hat super funktioniert! deine seite ist toll! <3

  68. ℓeиα

    24. January 2014 at 17:10

    Kriegt man das auch mit dem Über Mich Bild hin? Dass es dann auch rund ist? Hat Jemand einen Tipp? LG Lena 🙂

  69. Frau Vau

    4. February 2014 at 17:55

    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!

  70. Nina L

    8. March 2014 at 12:46

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

    1. lovemira

      12. March 2014 at 14:05

      Der Wert für Border-Radius sollte optimalerweise etwas größer als die Breite bzw. Höhe des Bildes sein 🙂

  71. Kim Schulte

    15. March 2014 at 9:06

    Danke für das Tutorial, hat super geklappt! ❤

  72. papillon en liberté

    15. April 2014 at 22:35

    Bei mir im Blog sieht man keinen einzigen Avatar, ich weiß einfach nicht wie das funktioniert 🙁

  73. ♥susanne♥

    18. June 2014 at 21:38

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

  74. filigarn

    19. July 2014 at 16:16

    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

  75. Lucy ♥

    17. August 2014 at 12:49

    ich würd das so gerne ausprobieren, aber es findet die Zeilen nicht 🙁

  76. Xenia

    7. February 2015 at 18:06

    Hat super geklappt! 🙂

  77. saragold.silberfink

    1. April 2015 at 8:33

    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

  78. Nadine Herr

    2. April 2015 at 14:40

    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/

Leave a Reply