2 de ago. de 2013

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

8 comentários:

  1. Poderia usar, mas prefiro a faixa com o nome "Author".
    Hey, consertei o problema do feed O3O

    ResponderExcluir
    Respostas
    1. Eu nunca vi essa faixa, parece legal ^-^

      Que bom que consertou o problema \o/

      Excluir
  2. Acho super lindo isso, sempre uso. Beijos.

    semprefuiestranha.blogspot.com | SEMPRE FUI ESTRANHA

    ResponderExcluir
  3. O meu não tem esse ícone padrão I-I
    Seria tão bom se todos nascessem com um computador cerebral, ai quando quiséssemos saber algo, era só procurar nos arquivos e tudo isso #emumfuturodistante ou #dimensãoparalela

    ResponderExcluir
    Respostas
    1. Seria tudo tão mais fácil... mas aí não seria vida né? kkkkk'

      Excluir
  4. Eu poderia usar, mais estou com preguiça, pois acabei de terminar o meu layout e.e

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!