Comentários personalizados - modelos prontos para usar

em 28 de agosto de 2013

Comentários personalizados - modelo pronto para usar
Gente querida!
Vou postar uma série com alguns modelos prontos para a área dos comentários do blog.
Será um por vez, pra não ficar confuso, tá?
Usarei o marcador Comentários personalizados e tentarei postar 1 modelo por semana.

O modelo de hoje é este:


Atenção!
Tutorial para os templates do Design de Modelo do Blogger.
Caso seu template seja modificado, externo ao blog ou se sua área dos comentários tiver sido muito alterada será preciso testar antes.

Para colocar em seu blog, exatamente nessas cores, desse jeitinho, é muito simples:

Acesse a aba Modelo de seu blog.
Clique em Editar html.
Dentro da caixa do código tecle Ctrl+F e na barra de busca que expandir cole isso:

  ]]></b:skin>

Dê Enter para localizar.
Quando encontrar cole o código seguinte acima da tag encontrada:

/* Comments
----------------------------------------------- */
.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:20px;font-size:11px;}
.comments .comments-content{margin-bottom:25px;font-weight:normal;text-align:left;
font-color: #ffccff;}
.comments .comments-content .icon.blog-author{position:absolute;top: 2px;right: 90px;margin:0;background-image: url(.);width:15px;height:18px}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 5px 10px;
padding:0 5px;
color:#ffffff!important; /*--- cor da fonte do botão reply--- */
text-align: center;
text-decoration:none;
background: #FF3E7B;  /*--- cor de fundo do botão reply--- */
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #EF4569), color-stop(1, #EF4569) ); /*--- cor de fundo gradiente--- */
background: -moz-linear-gradient( center top, #EF4569 20%, #EF4569 100% );/*--- cor de fundo gradiente--- */
border-radius:3px;
-moz-border-radius:3px;
height:25px;
line-height:26px;
font-weight:normal;
cursor:pointer;
}
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:50px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative;
}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{font-weight:normal;text-decoration:none;}
.comments .comments-content .datetime a{
font-size:11px;
float: right;
text-decoration:none; color:#FF3E7B; /* -- cor do link da data do comentário -- */
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
margin-left:65px;
position:relative;
background:#fff; /* -- cor de fundo do comentário -- */
border:1px solid #FF3E7B; /* --- cor da borda do comentário ---*/
border-radius:5px;
-moz-border-radius:5px;
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
background-color:#fff;   /*--- cor de fundo--- */
font-size:15px;
border-top:5px solid #FF3E7B;  /*--- cor da borda --- */
padding:5px;
}
.comment-header a{
color: ; /*--- cor do link nome do autor do comentario --- */
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.avatar-image-container{
float:left
vertical-align:middle;
overflow:hidden;
width:65px !important;
height:51px !important;
max-width:65px !important;
max-height:51px !important}
.comments .avatar-image-container img{
padding:2px;
border:1px solid #E72750;
width:45px !important;
height:45px !important
;max-width:45px !important;
max-height:45px !important;
}

Todas as alterações possíveis em termos de cores e fontes estão definidas no próprio código.
Depois de pronto clique em Salvar alterações.

Dicas extras

  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.

Simples demais, né?

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ê.






Conheça a web-série Como personalizar o blog

  1. Como criar um blog: criação da conta Google e criação do blog
  2. Trocar o plano de fundo do blog e alterar largura e disposição das colunas
  3. Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
  4. Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
  5. Criar um menu com abas abaixo do cabeçalho e inserir links nele;
  6. Inserir assinatura personalizada;
  7. Colocar Voltar ao topo com efeito deslizante;
  8. Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
  9. Data dos posts em formato calendário
  10. Número de comentários dentro de um balão  

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.

30 comentários , comente também!

  1. Eu queria saber mudar o formulário do comentário do blog, vc sabe me dizer como faz? =(
    Bjinhos
    http://laialisafa.com/

    ResponderExcluir
  2. Mais um para a minha lista para você fazer para mim. Claro que cobrando, né?
    Beijos amiga.

    ResponderExcluir
  3. Que legal amiga sempre trazendo novidades pra nós blogueiras.
    Abraço,
    Toninha
    http://www.educar-oprimeiropasso.com/
    http://toninha-ferreira.blogspot.com.br/

    ResponderExcluir
  4. Como sempre, tutorial completo!! Eu tenho um pedido! Vc ensina a colocar o print friendly? Já fiz de tudo mas o danado só aparece se a pessoa abrir os comentários, estranho isso, né? Acho que um post sobre os tais gadgets para impressão seria muito bom, ainda mais a gente que se preocupa tanto em não ser copiado!!

    Enquanto vc pensa aí, vou desejando um ótimo finalzinho de semana, com paz e harmonia, ah ia esquecendo, tem sorteio rolando na Cozinha, se quiser participar, ficarei feliz.

    beijoooooooo

    ResponderExcluir
  5. Muito generoso da sua parte essa sua ajuda.
    Um abraço e tudo de bom para si.

    ResponderExcluir
  6. Ainnnn funcionou lindamenteeeee. Obrigada! ^^

    ResponderExcluir
  7. Conseguimosss Elaine Obrigada amor!
    Eu e minha mãe rsrrsrs
    Ficou lindo meu blog
    apanhamos muito e nada de aparecer as mudanças... ai fomos la e mudamos a configuração de janela pop-up para incorporado hahaha
    burrinha neh?
    Obrigada de coração *__*

    ResponderExcluir
    Respostas
    1. Roberta, bem lembrado, eu havia esquecido de dizer isso no post, que tem que ser comentário tipo Incorporado.
      Valeu o lembrete!
      bjsssss

      Excluir
  8. eu não consegui fazer não encontrei o código ]]> oq será que aconteceu?

    ResponderExcluir
    Respostas
    1. Não faço ideia, todo e qualquer template do Blogger tem esse código.
      Com certeza, pois é ele que define o fechamento do CSS do template...

      Excluir
  9. Eu não consegui colocar. Não acha o ]]>, não consigo encontrar esse trecho do código. Por que não dá certo?

    ResponderExcluir
    Respostas
    1. Edy, não faço ideia. Mas tente de novo, todo template tem esse trecho.
      Procurou dentro da caixa de código?

      Excluir
  10. No meu tambem não achou o ]]> estranho....

    ResponderExcluir
  11. Usei e modifiquei com meus gosto. Obrigada pela dica! http://alinezanatta.blogspot.com.br/

    ResponderExcluir
  12. Eu nada consegui,amiga.Tentei


    Bjs


    Dryka

    ResponderExcluir
  13. Dica fantástica, acabei de usar em um blog privado e deu certinho! :) Um abraço!

    ResponderExcluir
  14. Olá Elaine, fiz tudinho só estou com 2 probleminhas o texto está invisível e quando posta aparece as benditas letras de confirmação.
    Vc pode dizer qual área no html que posso fazer essa alteração?
    Obrigada pelo seu blog que é maravilhoso...bjks

    ResponderExcluir
    Respostas
    1. Bianca, creio que a cor do texto você define em Modelo/Personalizar/Avançado
      Para tirar as letras de confirmação vá em Configurações/Postagens e comentários e marque a opção Não no item Mostrar verificação de palavras.
      Certinho?
      bjssss

      Excluir
  15. Muito bom adorei !!
    http://meumundoilusao.blogspot.com.br/

    ResponderExcluir
  16. Infelizmente, não consegui testar em um blog de teste e deu erro de...Não foi possível carregar a visualização do modelo: Erro ao analisar XML, linha 1, coluna 1: Content is not allowed in prolog.

    Adoro acompanhar suas dicas e procuro ficar bem relacionada ao assunto.

    Beeijos! ;)

    ResponderExcluir
  17. eu nunca consigo copiar o código,como faço pra copiar os códigos e colar no meu blog?

    ResponderExcluir
  18. Achei lindo. Estou usando no meu blog ♥

    ResponderExcluir
  19. Aêeee, nem acredito que consegui! Finalmente! Ainda com as cores que eu amo. Obrigada, estou usando no meu blog, só fiz umas alterações viu?
    Beijoss ♥
    http://natalibispo.blogspot.com.br/

    ResponderExcluir
  20. Olá!

    Segui os passos mencionados e deu certo, ficou ótimo. Só mudei a cor!

    Obrigada.

    Thais Lelis
    Blog Arquitetar e Decorar

    ResponderExcluir
  21. Muito obrigada por disponibilizar o modelo! Ficou muito bom! :D Todas as suas dicas me auxilam muito. :D

    http://livroseacucar.blogspot.com.br/

    ResponderExcluir
  22. Elaine, num template que eu instalei não consigo ativar comentários para páginas no blogger. As postagens estão normais, o espaço para comentar só aparece nas postagens regulares. Já tentei de tudo. Existe algum jeito de habilitar comentários por código HTML no meu caso?

    https://ouniversoleitor.blogspot.com/

    ResponderExcluir
    Respostas
    1. Cláudia, eu não sei dizer porque templates externos, baixados da internet, possuem códigos específicos e cada um é de um jeito...
      Experimentou ativar manualmente ao escrever a página?

      Excluir

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…