Como trocar o Ícone de Autor nos Threaded Comments do Blogger

Quem usa o sistema de comentários nativo do Blogger, os Threaded Comments, ou  Comentários Aninhados, nota que nos comentários do Autor do blog, aparece um ícone de lápis ao lado do nome. Neste post eu ensino como trocar essa imagem por outra.

Um ícone muito feio! Não é verdade?

O processo é bem fácil, mas antes é recomendável fazer um back up do seu modelo, caso algo dê errado. Vá em Painel de Controle >> Modelo >> Editar HTML >> procure o código CSS abaixo, clicando na seta para abrir os estilos do seu blog, que fica entre <b:skin>...</b:skin>, use control + F:

Só faça isso se você tem o mínimo de conhecimento em layouts do Blogger

.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

O código que está em azul é do ícone nativo, basta colar no lugar a url de uma imagem de dimensões 18 x 18, de preferência redonda, como por exemplo, essa que eu criei com a minha própria foto:

Eis como ficou:

Só criei como exemplo, mas não vou deixar ela!

Um ícone que pode ser colocado é o que o Twitter e o Facebook usa nas contas verificadas, a imagem abaixo já está dimensionada em 18 x 18 e transparente, basta copiar e colar o link da url no código acima:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcJPzs0p1M-kgZrtraEPjddFBf8wNaXauFHWNkcBSzBZkpqpGS5Bl1aeZweFuvIxVNf1oTyVjcLlmfBKTxHwVWE9swBj97wDaBtuA-_lkRW5RPpugdGef_aWYx1Ie2oxO6OM2cyg/s1600/twitter.png

Eis como fica o código CSS:

.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
background-repeat: no-repeat;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcJPzs0p1M-kgZrtraEPjddFBf8wNaXauFHWNkcBSzBZkpqpGS5Bl1aeZweFuvIxVNf1oTyVjcLlmfBKTxHwVWE9swBj97wDaBtuA-_lkRW5RPpugdGef_aWYx1Ie2oxO6OM2cyg/s1600/twitter.png);
}

Et voilà!!! Simples não?