03/05/2015

Área de comentários do blog personalizada


Oie! A pedido da Nanda, do blog Nandalandia, trago este tutorial de como personalizar a área dos comentários do blog. Mais especificamente, deixar da forma como está o meu, atualmente.
Ele ficará assim:


Então, vamos ao tutorial!

1- Antes de tudo, faça um backup do seu layout, pois você precisará salvar o blog para visualizar se deu certo, e, se o tuto não der certo no seu blog, você acabará estragando seu layout. Não sabe como fazer o backup? Veja esse tutorial

2- Abra o HTML do seu blog, aperte Ctrl + F e procure por:

#comments {

3- Aparecerá um código parecido com esse (se seus comentários já forem personalizados, ele provavelmente estará bem maior):

#comments {
  background: $(comments.background);
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}

4- Substitua tudo por:

/* INÍCIO DA PERSONALIZAÇÃO DOS COMENTÁRIOS */
#comments {
  background: #ffffff; /* cor de fundo da área dos comentários */
  padding: 15px; /* largura da área - aumente o nº para diminuir */
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-timestamp a {
  font-family: 'Amatic SC', cursive; /* estilo da fonte do título dos comentários */
  font-size: 30px; /* tamanho da fonte */
  text-align: center; /* alinhamento do texto */
  color: #a8cec3; /* cor da fonte */
}
.comments .avatar-image-container {
  max-width: 50px;
  max-height: 50px;
  min-height: 50px;
  min-width: 50px;
  background: #a8cec3; /* cor da borda em volta do avatar */
  padding: 5px; /* espessura da borda */
  border-radius: 200px; /* borda do avatar redonda, se preferir, exclua essa linha */
  border: 1px dashed #ffffff; /* tamanho e estilo da borda */
}
.comments .avatar-image-container img {
  max-width: 50px;
  max-height: 50px;
  min-height: 50px;
  min-width: 50px;
  border-radius: 200px; /* avatar redondo, se prefeirr, exclua essa linha */
}
.comment-header {
  background: #fce9e9; /* cor de fundo do nome do autor do comentário/*
  border: 1px dashed #ea9999; /* tamanho, estilo e cor da borda do nome do autor do comentário*/
  border-radius: 5px; /* deixa a área do nome do autor arredondada, retire essa linha se preferir */
  padding: 3px; /* espaçamento entre as outras áreas dos comentários */
}
.comment-header a {
  color: #a8cec3 !important; /* cor do nome do autor do comentário */
  font-family: 'Poiret One', cursive; /* fonte do nome do autor do comentário */
  font-size: 20px; /* tamanho da fonte do nome do autor do comentário */
}
.comment-header a:hover {
  color: #684980 !important; /* cor do nome do autor do comentário quando o mouse é passado */
  text-decoration: none;
}
.comments .comments-content .datetime a {
  font-family: 'Poiret One', cursive; /* fonte da data do comentário */
  font-size: 14px !important; /* tamanho da fonte data do comentário */
  color: #a8cec3; /* cor da fonte da data do comentário */
  float: right; /* alinhamento do comentário - retire se preferir */
  line-height: 16px; /* tamanho da linha do comentário */
}
.comments .comment-block {
  margin-left: 70px; /* espaço entre o avatar e a área dos comentários */
}
/* FIM DA PERSONALIZAÇÃO DOS COMENTÁRIOS */

6- Faça as alterações necessárias para combinar com o layout do seu blog.

5- Outra coisa: Essas fontes (Amatic e Poiret One) que usei nesse código não serão reconhecidas pelo blog. Para que o blog reconheça-as é preciso que você mexa em outra parte do HTML do seu blog, também. Para isso, ainda no HTML, procure por:

</head>

6- Acima de </head>, cole os seguintes códigos:

 <link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'/>
  <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'/>

7- Salve e veja se deu certo! Não deu? Lembra que você fez um backup do seu blog? Agora restaure-o.

Se o seu layout já for muito modificado, talvez não dê certo. O bom seria retirar os códigos de estilo do seu comentário atual pra depois colocar esse.

Gostou? Deu certo? Dúvidas? Deixe um comentário...

Comente com o Facebook:

8 comentários:

  1. Muito legal, eu usei muito tutoriais quando comecei a usar o blogger, eles me ajudaram muito.

    ResponderExcluir
  2. Paolla, não creio que você fez o tutorial tão rápido! Muito obrigada mesmo!
    Meu blog agora está lindo graças a você!
    Abraços, Nanda
    Blogueira de Nandalandia

    ResponderExcluir
    Respostas
    1. Que bom que gostou. Ficou lindo da forma que você modificou! *u*

      Excluir
  3. Que fofura seu blog e esse tutorial!
    Só não uso porque estou tentando editar o próprio do template :3

    Mas cara, estou tentada a usar ♥

    ResponderExcluir
  4. Nossa que perfeito!Vou usar no meu novo template.

    oxenalanda.blogspot.com.br

    ResponderExcluir