Personalizar os avatares dos comentários

Olá garotas *-* Hoje vou ensinar vocês a personalizarem os avatares dos comentários, aquele avatar cinza do anônimo:

Clique em Continuar Lendo para ver o tutorial:

1. Crie uma imagem de 40x40 e hospede ou pegue uma da internet, eu fiz umas para vocês, coloquei os URLS nas caixinhas de texto:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWTJWgwbqeu1KjH2rLvVgKNoiE97S_P704EeeKLSH294BnY8IS_yZPD7iQBekodYOJCQIo8thlOUQvouwGXlWqbjsijmfiwnmF3bZHK0wnWbOaOTV5PEhKojq470T_r3RKOryatgws3Dj/s1600/Avatar+01.png




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwnNRwRX3KD7niMbFUULZOwDl1z5Vao96oBjXtCxrJ4pofBFdufS_xeL-nv0K4OoOFsjc5Veb_GlLWr3px8aVCV-Os4dnGqlKrFRk7vtUe0lC8EVAazTYajUFnMo6qsVznXaFt5bpuUSJM/s1600/Avatar+02.png




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiODtdulOZQwt5NCHgqBHyM4f6WnlrFPeBOj4PttzKmywkVDA0pnfin3clL6Mxa0QwTgly_FMVSNVbZ6A34Dd1KWn5biigMCtZwJCigXOECrDeZIocRTOP6Ey1ACJfMv3vsjmkLLgKsdUiX/s1600/Avatar+03.png




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinEZuRRJeUf14J0X6ZxyqpBWZjIWWPUWuECK52frU6zlOFn8LEUYiI4OaHmbOVHo09MkXLqaVQm8mLUbNLTl37DXmwh_BzFFSXHQ9iWpKytJMavCvo4wTuzF4IQghvd7xHMXJECoreQvhe/s1600/Avatar+04.png

2. No Blogger, vá em Design > Editar HTML. Tecle Ctrl F e procure por:

/* Content

3. Cole o código abaixo logo abaixo de /* Content, substituindo a parte em azul pelo URL do avatar:

div.avatar-image-container {background:url(URL DO AVATAR) no-repeat center center;}
div.avatar-image-container img {display:none;}
div.avatar-image-container img.delayLoad {display:block;}

P.S.: Para visualizar os avatares, você vai ter que salvar o modelo e ir até um comentário anônimo.