03/01/2013

Tutorial: Imagem nos comentários do autor

||

Trago um tutorial muito simples porém muito útil, ele e perfeito para diferenciar os autores do blog dos comentarias. Esse tutorial deixa uma imagem ou icone marcando que você e o autor do blog, assim faciliando dos seus leitores saberem que é você, evitando aquelas pessoas se passarem por moderador no blog.


Para isso vá em editar HTML e procure pela tag:

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

Mas abaixo disso você vai encontrar esse codigo que mostro abaixo, apague tudo ele.

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

E no lugar coloque esse codigo:

.comments .comments-content .icon.blog-author{
position:absolute;
top: -2px;
right: 160px;
margin:0;
background-image: url(SUA IMAGEM);width:32px;height:36px
}

Onde esta top e right você muda a posição do seu ícone. Vá modificando nos números até achar a posição que te agradar. Mude "Sua imagem" com os px exatamente iguais no que estao widht e height coloque a largura e altura. Créditos de KW.

6 comentários:

  1. Aceita afiliação?

    http://kawaii-little-things.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yo aceito sim, você ja esta na minha coluna

      Excluir
    2. Vou por vcs na elite :) *--* obrigada por ter ido la no KT

      Excluir
    3. Certo, nao foi nada ^^

      Excluir
  2. Olá ^^ Amei o seu blog, e utilizei alguns tutoriais para fazer remodelações ao meu layout ^^ Queria perguntar uma coisa, como se faz aquele menu como você tem, aquele que aparece no topo da página quando se passa o mouse? Se já escreveste o tutorial, peço desculpa por estar a incomodar, mas é que eu não encontro /:

    Obrigado ^^

    Asia Looks For You

    ResponderExcluir
    Respostas
    1. Que legal! Tenho certeza que deve estar ficando lindo, esse menu se encontra nesse site: http://lovers-of-designs.tumblr.com/post/55434307410/olha-outro-tutorial-de-menu-fofinho-pra-voces

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram