03/01/2013

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.

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

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

2. Mas abaixo disso você vai encontrar esse código que mostro abaixo, apague tudo ele.

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

3. E no lugar coloque esse código:

Códigos
.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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345