14 de abril de 2014

Comentários personalizados



Olá meus amorecos, hoje estou aqui para ensinar mais um tutorial para vocês, dessa vez sobre como personalizar seus comentários, vamos lá : 
Antes de começar, vale lembrar de duas coisas muito importantes:
1 - Faça um backup do seu modelo antes de fazer qualquer tutorial. Assim se algo der errado, você pode reverter as alterações facilmente fazendo upload do modelo sem as alterações.
2 - Quando editamos os comentários não tem como visualizar antes de salvar. Então recomendo que você edite o código primeiro no bloco de notas, depois passe para o blog e salve. Aí se algo ainda precisar de ajustes, você modifica, salva e visualiza até ficar como você quer. (É bem cansativo)

Agora sim, vamos ao tutorial! Seus comentários deverão ficar mais ou menos assim:

O código já está com esses tons de lilás, então seu layout tiver essas cores nem vai precisar mudar muita coisa.

Para deixar os comentários assim, abra o Modelo HTML clique na caixinha do código e de ctrl+F vai abrir uma caixa de pesquisa,lá você cole o código a seguir na caixa de pesquisa ]]></b:skin>

Em seguida cole o código abaixo em cima do código ]]></b:skin>





Código
/*****************************INICIO COMENTARIOS - CHERRYBOOMB.COM*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #c19bdf; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*Tamanho da fonte*/}
#comments {
background: #fff; /*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: #c19bdf; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #9e80b6; /*Borda de onde fica o nome do autor do comentário*/
padding: 3px;}
.comment-header a {
color: #fff !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: #684980 !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*/
float: right; /*Data alinha á direita*/
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: #e7dceb; /*Fundo do bloco de texto do comentário*/
border: 1px solid #cdc3d0; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #4c4c4c; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}

.comments .avatar-image-container {
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #d2b6e5; /*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: #d2b6e5; /*Fundo dos botões responder e excluir*/
border: 1px solid #b59dc6; /*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: #e3c6f6; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #b59dc6; /*Borda dos botões responder e exluir quando passa o mouse*/
color: #684980 !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;}

.comments .continue { border-top: none;}
.comments .continue a {display: none;}

/************FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM NÃO RETIRE OS CRÉDITOS************/

Todas as instruções estão no código, não altere nada que não souber para não dar erro depois. Faça todas as alterações com muito cuidado para não apagar nada sem querer. Salve e visualize se ficou tudo ao seu gosto.

Se seus comentários não estiverem com a opção de resposta, vá em Configurações > Postagens e comentários  e onde está escrito "Local do comentário" mude para incorporado e salve.

OBS: pra quem quiser mudar as cores aqui está a tabela com o código das cores 

Espero que tenham gostado e que dê tudo certinho para vocês.
Gostou? Compartilhe!
  • Facebook
  • Tweet this
  • Google Buzz

Comente com o Facebook:

10 comentários:

  1. Olá lindona!! Seu blog está muito bom. Ah!! Curti bastante a dica para personalizar os meus comentis ...Um beijão! E já estou seguindo aqui. bjs e boa sorte com o blog.
    http://confetesaovento.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oiii, muito obrigada por dar sua opinião , que bom que gostou espero que faça , e me mande fotos de como ficou , um grande beijo

      Excluir
  2. oi linda segui seu blog ao seu pedido espero vc la no meu blog viu lindona
    http://modacomdayribeiro.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi linda , pode deixar que irei no seu cantinho te visitar

      Excluir
  3. Gostei das dicas e gostei do seu blog.Estou te seguindo.Beijos.

    http://soulplaymusicfc.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou das minhas dicas espero que as use, um beijo

      Excluir
  4. Oi Aline!

    Tudo bem?

    Amei essa dica! Vou usar no meu blog! =)

    Conheci o seu blog através do grupo do facebook!

    Adorei!

    Bjus!

    http://desejosdeumafashionista.com/

    ResponderExcluir
    Respostas
    1. Olá Juliana, tudo bem e com você ? Que bom que gostou e ira usar em seu blog.
      Um beijo.

      Excluir
  5. Oiii linda tudo bem? Espero que sim! :)
    Adorei o tutorial, vou tentar no meu...
    Amei seu cantinho, é lindo viu? Seguindo aqui! :c
    Beijos!<3
    makeuparte.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Oii Gata, tudo bem e você ?
      Espero que tenha gostado e use em seu cantinho , um grande beijo.

      Excluir

 
Veja os últimos posts

Design e programação: Carol Mascarenhas
Aline Indecisa - COPYRIGHT © 2015 TODOS OS DIREITOS RESERVADOS