How to get rounded comment avatars

Da es schon ewig her ist, dass ich einen wertvollen Tipp geteilt habe, erkläre ich heute mal wieder zum Tipps-Freitag 🙂

Schon vor einiger Zeit hat sich das Layout meiner Kommentare etwas verändert. Es war zwar nicht so, als hätten mich die quadratischen Avatare in den Kommentaren gestört…aber irgendwie…da geht noch was!

Ihr wisst was ich meine.

Wieso einfach, wenn man sich auch selber Arbeit machen kann? xD

rund_ava2

Die neuen, runden Avatare, umrandet mit “meiner” Blogfarbe finde ich persönlich einfach ein bisschen eleganter, ein bisschen hübscher.

Und natürlich kann jeder solche runden Kommentarbilder haben! Wie das geht? Ganz einfach:

Als ersten Schrittwie immer – euer Template sichern. (Am besten unter einem prägnanten Namen speichern “Blog_August2013” oä.)

Als zweiten Schritt in das Template gehen:

backup

Als dritten Schritt in das Template klicken und mit Strg+F

]]></b:skin>

suchen und den folgenden Code direkt DARÜBER einfügen.

rund_ava3

Code:

.avatar-image-container,
.avatar-image-container img {
max-width: 45px !important;
width: 45px !important;
max-height: 45px !important;
height: 45px !important;
padding: 0 !important;
border: 0px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px; }

.avatar-image-container
{ border:2px solid #007D47 !important;
-webkit-box-shadow: 0 1px 2px #BBB;
-moz-box-shadow: 0 1px 2px #BBB;
box-shadow: 0 1px 2px #BBB; }

Anmerkungen:

  • Lila markiert ist die Breite des Avas – wenn der Kreis beispielsweise zu weit in das Kommentarfeld steht oä, hier in 1px Schritten ändern (und zwar alle, Kreise sind rund, ne ;))
  • Rot markiert ist die Dicke der Umrandung, solid heißt dabei bloß “durchgängig”. Es gibt noch dotted, double und dashed.
  • Blau markiert ist dann noch die Farbe dieser Umrandung – ohne Umrandung (also 0px in der roten Markierung), braucht man logischerweise auch keine Farbe. Den Hex Code passend zum Blog Design findet man ganz leicht durch Suchmaschinen.

Als vierten Schritt das Template sichern und die runden Avas bestaunen 🙂

Beispiel

Sollte mit so ziemlich jedem Template funktionieren. Falls nicht: Probieren die Kreisgröße zu ändern. Sollte gar nichts gehen, kann man immer noch das davor gespeicherte Template wieder hochladen 🙂

Wer noch Fragen hat, kann sie gerne in den Kommentaren stellen!

Die bisher veröffentlichten Tipps zum Durchklicken (auch auf der Blog Tipps Menüseite):

Blogger-Tipp #2: Start a (beauty)blog – the classy way Blogger Tipp #3: Threaded comments, die zweite Blogger-Tipp #4: Hide my…contact details!
CAPTCHA? Nein, danke! Blogger-Tipp #5: Wie viele Feed-Leser hab ich wohl… Blogger-Tipp #6: Auto Jump Break for Archive & Labels
Blogger-Tipp #7: How to import blogs to bloglovin’ Blogger-Tipp #8: How to make the most out of Windows Live Writer Blogger-Tipp #9: How to customise your sidebar headings
Blogger-Tipp #10: How to automatically add a signature Blogger-Tipp #11: How to add rotating header images
Blogger-Tipp #13: How to get dofollow backlinks from Pinterest    

Eure HTML Tweaking Mutti,

Godfrina


You May Also Like

4 comments

Reply

Großartiger Tipp, würde mir sehr gut gefallen! Problem ist nur…irgendwas hat Blogger am Template Editor verbockt. Ich kann zwar ein Suchfeld öffnen und den Begriff eingeben, aber mit dem drücken der Entertaste war es das auch schon. Die Suchfunktion funktioniert nicht. Ging mir neulich schon so…keine Ahnung was da los ist, nervt mich total, weil ich so aktuell nicht die Bohne am Layout spielen kann 🙁 Also könnte ich schon, aber hab ich Lust zig Zeilen Code zu durchsuchen? Ich glaube nicht ^^

Reply

@Lilo Ist bei mir genauso 🙁

Reply

@Bella SnowIn jedem Browser? Ist es wirklich die Suchfunktion des Templates – so wie im Screenshot – oder vielleicht doch des Browsers?
Ansonsten kann man sich durchaus auch im Template umsehen. Dieses Code Stück kommt relativ weit unten vor.

Reply

danke, bei mir hat es wunderbar geklappt und ich finde, dass es sehr cool aussieht 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge