Tutorial - Imagem nos comentários do autor

Boa tarde, pessoal.

Acabei me distraindo lá na nossa página do Facebook conversando sobre Revenge, uma das minhas séries favoritas. Espero que me desculpem por isso, mas não resisti, precisei conversar com o pessoal sobre ela e o que anda rolando. Para quem não conhece a série, eu super recomendo, pois é impossível assistir e não se apaixonar pela história e pelos personagens.

Trouxe dessa vez um tutorial muito simples. Vou ensinar a vocês a colocar uma imagem ao lado do nome no autor do blog ou em qualquer lugar dos comentários dele. Vejam que aqui mesmo no Kawaii World eu tenho uma estrela nos meus comentários para indicar que sou eu quem posto aqui no caso de aparecer aqueles famosos engraçadinhos se passando por mim, além de dar um destaque. Fazer isso é muito simples, é só substituir um código por outro.

1. Vá em editar HTML e procure por .comments .comments-content .icon.blog-author. Abaixo disso você vai encontrar um código enorme, apague tudo. Veja aqui abaixo o que você precisa apagar:

.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==);

}

2. Elimine tudo dessa caixinha acima e troque pelo seguinte código:

.comments .comments-content .icon.blog-author{

position:absolute;

top: -2px;

right: 160px;

margin:0;

background-image: url(LINK DA SUA IMAGEM);width:32px;height:36px

}

Em top e right você regula a posição do seu ícone. Vá mexendo nos números até achar a posição que te agradar. Troque "Link da sua imagem" por exatamente o que ela pede e em widht e height coloque a largura e altura, respectivamente.