Colocando ícone de "autor" nos comentários

Olá anjos!

Eu ainda estou feliz desde a última postagem, mesmo com vendo a volta nas aulas no horizonte... Odeio ir à escola, mas infelizmente isso é um mal necessário. Já tenho poucas chances de conseguir algo indo a escola, imagina se não for? Seria tão bom poder fazer download de informações no nosso cérebro, instale um aplicativo e pronto, tudo pode ser acessado quando você quiser #MarinaSonhando

Quem usou o tutorial de personalizar os comentários daqui do blog já deve ter visto que sempre que o dono do blog comenta, aparece um pequeno ícone que se parece com um lápis ao lado da data. O tutorial de hoje é para trocar esse ícone por outro a sua escolha, deixando a área de comentários mais fofa. Veja um exemplo dos ícones:

     

A esquerda, o ícone padrão, e a direita, o ícone personalizado.

1- Vá no HTML do seu blog, abra a setinha ao lado de <b:skin> e procure por:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==

Vai estar assim:

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

Essa é a URL daquela imagem do "lápis", repare que se você abrir em nova guia, o ícone do lápis vai aparecer.

2- Substitua o código que você procurou pela URL de seu ícone. 

3- Modifique os códigos abaixo da URL de acordo com o tamanho do ícone, sendo "width" a largura, "height" a altura, e "float" a posição do ícone;

Alguns ícones para vocês:

                              

Mini gifs e favicons também ficam legais como ícones, desde que sejam pequenos.

Recomendo o site icon finder para procurar ícones pequenos.

Espero que gostem do tutorial :3

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar