Modelo pronto para comentários do blog

em 1 de outubro de 2013

Olá, querido leitor!
Mais um modelo para a área de comentários do blog.
Depois de pronto ficará assim:
modelo de comentário personalizado pronto para usar


 Para ter em seu blog é muito simples!
Comece acessando a aba Modelo.
A seguir clique em Editar html e dentro da caixa de código tecle Ctrl+F. Na barra de busca que expandir cole isso:

 /* Comments
----------------------------------------------- */

Dê Enter para localizar.
Caso seu template nunca tenha sido alterado nessa parte você verá esse código, ou algo semelhante a isso:

 /* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AH
YHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1F
pBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pw
N0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
  background: $(content.background.color) $(content.background.gradient) repeat-x scroll top left;
}
.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.title.border.bevel.color);
  border-bottom: 1px solid $(widget.title.border.bevel.color);
}
.comments .comment-thread.inline-thread {
  background: $(content.background.color) $(content.background.gradient) repeat-x scroll top left;
}
.comments .continue {
  border-top: 2px solid $(widget.title.border.bevel.color);
}

Em alguns templates pode estar diferente. O importante é você localizar toda a área referente aos comentários e substitui-la pelo código abaixo:

 /*Início do código de comentários personalizados*/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #a67445; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*Tamanho da fonte*/}
#comments {
background:transparent; /*Fundo da área geral dos comentários*/
padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}
.comment-header {
background: #E9F0FC; /*Cor de fundo do nome do autor do comentário*/
opacity:0.6;
border: 1px solid #E9F0FC; /*Borda de onde fica o nome do autor do comentário*/
padding: 3px;}
.comment-header a {
color: #3877E0 !important; /*Cor do nome do autor do comentário*/
font-family: Verdana; /*Fonte do nome do autor do comentário*/
font-size: 16px; /*Tamanho da fonte do nome do autor do comentário*/
font-weight: normal; /*Troque normal por bold para deixar o texto em negrito*/}
.comment-header a:hover { color: #B0C5E8 !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}
.comments .comments-content .datetime a{
font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/
line-height: 16px; /*Altura da linha da data e hora*/}
.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor. Só mexa se souber o que está fazendo*/
position: relative;
background: #F1F6FE; /*Fundo do bloco de texto do comentário*/
border: 1px solid #DCE7F9; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #4c4c4c; /*Cor da fonte do bloco de texto do comentário*/
text-shadow: 1px 1px 1px #fff;
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
-webkit-mask-image: url(http://i36.tinypic.com/254vbpj.png); -moz-mask-image: url(http://i36.tinypic.com/254vbpj.png); -o-mask-image: url(http://i36.tinypic.com/254vbpj.png) mask-image: url(http://i36.tinypic.com/254vbpj.png);
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #B0C5E8; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}
.comments .avatar-image-container img{
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}
.comments .comment .comment-actions a {
padding: 5px;
background: #6195ED; /*Fundo dos botões responder e excluir*/
border: 1px dotted #6195ED; /*Borda dos botões responder e exluir*/
color: #fff !important; /*Cor do texto dos botões responder e excluir*/
font-family: verdana; /*Fonte dos botões responder e excluir*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;}
.comments .comment .comment-actions a:hover {
background: #CFDEF7; /*Fundo dos botões responder e excluir quando passa o mouse*/
opacity:0.6;
border: 1px solid #CFDEF7 /*Borda dos botões responder e exluir quando passa o mouse*/
color: #000000; !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;}
.comments .comment-thread.inline-thread {
background-color:transparent !important;
padding:0.5em 1em;
border-radius:5px;
border:0!important;
margin-right:-15px
}
.comments .continue { border-top: none;}
.comments .continue a {display: none;}
.comments-content {  counter-reset: contarcomentarios;  }
.comment-thread li:before {  content: counter(contarcomentarios);  counter-increment: contarcomentarios;  float: right;  font-size: 24px;  color: #666666;  } 
/*Final do código de comentários personalizados*

No código deixei tudo marcado, assim fica simples alterar cores e fontes.
Depois de pronto clique em Salvar alterações.

 Mais dicas:

  1. Caso um dia queira alterar ou reverter basta apagar o código inserido.
  2. Aqui tem uma tabela de cores para você usar e escolher as cores que desejar.
  3. Para copiar todos os códigos deste blog pare o mouse sobre o código e clique no primeiro ícone que aparecer, à sua direita. abrirá uma janela com o código prontinho para ser copiado.

Gostou e deseja ter em seu blog mas não tem tempo ou jeito para fazer?
Entre em contato comigo, combinamos o pagamento e eu faço para você.

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

13 comentários , comente também!

  1. Oi Elaine
    Passando por aqui pra ver as no novidades até tentei seguir as dicas pra bloquear a cópia de fotografias mas nao consegui ,de primeira.
    Depois vou voltar e insistir, rs
    Obrigada Elaine e desculpe nao frequentar com assiduidade seu blog que acho o máximo de elegância solidariedade e amizade nunca visto .
    O tempo da gente é tão curto nao dou conta mesmo, mas gosto muito do seu blog.
    Desejo sucesso ,
    um abraço grande

    ResponderExcluir
  2. Elaine, levo cada susto com esses HTML rsrsrsrs
    Mas um para colecionar e depois aprender rsrsr
    Boa noite.
    Beijos querida.

    ResponderExcluir
  3. Elaine querida, não entendi nada.
    Vou contratar você pra fazer, topa?
    Beijo

    ResponderExcluir
    Respostas
    1. Oba!
      Claro que sim!
      Escreve pra mim e a gente combina!
      beijossss

      Excluir
  4. Eu morro de medo de mexer em html! Já tentei mas não deu certo!
    Beijinhos...

    ResponderExcluir
  5. Olá tudo bem?

    Sou do Agregador de Links e Conteúdo GOOGLULINKS e venho lhe convidar a ser um de nossos parceiros. Visite-nos, faça o cadastro de seu blog e divulgue quantos links desejar por dia. Não temos fila de espera e não temos BUROCRACIA na aprovação de links. Pode mandar imagens em qualquer tamanho, apenas sugerimos que a mesma seja ao menos quadrada. Obrigado.
    O endereço do GoogluLinks é este:

    http://www.googlulinks.net/home

    Para cadastro é este:
    http://www.googlulinks/parceria/

    Aguardamos você.
    Equipe GoogluLinks

    ResponderExcluir
  6. elaine faz um tuto de como por paginas no blog e ensina como mexer nesse novo html do blog . bjs de sua maior fa !!

    ResponderExcluir
  7. Muito difícil esse ,Elaine.

    Só preciso de 1 coisinha. Quero saber como se faz para colocar bordas coloridas no espaço do comentário.Do tipo desse blog:

    http://taisoliveirablog.blogspot.com.br/

    Se souber,amiga,explique para mim aqui ou por email ,ok?


    Beijinhos


    Dryka

    Blog Suas Histórias Nossas Histórias





    ResponderExcluir
  8. Coloquei no meu, ficou bem legal, eu mudei a cor e tals!

    http://historiaimperfeita.blogspot.com.br/

    ResponderExcluir
  9. Elaine agora eu consegui, essa postagem está bem mais fácil q a anterior!!!!
    muito obrigada seu blog está me ajudando muito.
    dá uma olhada.
    bjks

    ResponderExcluir
  10. Muito obrigada meeeeeesmo!!! Seu blog é ótimo, acabei de conhecer mais já amei *U* Eu to fazendo um blog do Club Penguin (é que eu sou criança kkk) e eu tava precisando muito das suas dicas e tutoriais!!! Eu amei, ganhou uma seguidora :)

    ResponderExcluir
  11. sempre que preciso alguma dica para melhorar a aparencia do blog corro aqui.
    sempre encontro o que quero, e tudo explicado de maneira simples.
    meu blog é o http://dicasdebelezaaki.blogspot.com e te convido a fazer uma visita.
    comentários são super bemvindos.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…