Personalizar a caixa de comentários do Blogger


Os comentários são uma parte essencial de qualquer blog onde os leitores expressam suas opiniões sobre um post ou o blog, por isso, é importante passar um pouco de tempo para deixar esta parte mais elegante, acessível, limpa e dinâmica.

Para colocar os comentários em ordem devemos deixar cada comentário fácil de ser identificado, saber identificar onde começa e onde termina, caso contrário torna-se um amontoado de letras e os visitantes poderão fugir.
Listamos alguns métodos para deixar os comentários mais organizados


Como adicionar um separador aos comentários do Blogger:





Passo 1: Para adicionar um separador simples vá ao Modelo> Editar HTML e clique na pequena seta à esquerda de <b: skin> ... </ b: skin>






Passo 2: Clique em qualquer lugar dentro da área do código e pesquise usando as teclas 
Ctrl + F, para o seguinte trecho de código: ]]></b:skin>







Passo 3: Cole o estilo logo acima dele:
- Se estiver usando comentários de rosca (com a opção de responder):

.comment-block {
border-bottom: 1px solid #000000;
}
.comments .continue {
  border-top: 0px solid #000;
}

- Se estiver usando o sistema de comentários anterior (sem opção de responder):
#comments-block .comment-footer {
border-bottom:1px solid #000000;
}

Nota: Para alterar a cor da borda, substitua o valor da cor em negrito e mude a sua espessura, aumentar / diminuir o valor 1.

Como adicionar uma borda e uma cor de fundo para os comentários do Blogger:







Passo 1: Vá ao Modelo> Editar HTML e procure o seguinte trecho de código: ]]></b:skin>


Passo 2: Cole o código abaixo acima dele:
- Se estivermos usando comentários de rosca (com a opção de responder):



.comment-block {
background:#F9F9F9;
/* Background Color */
border: 1px solid #f1f1f1;
/* Border style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comments .comment-thread.inline-thread {
background-color: #FAFAFA;
/* Background color behind the replies */
border-left: 4px dotted #E6E6E6;
/* Border on the left side of replies */
}
.comment-content {
padding:2px 10px 10px 10px;
color:#444444;
/* Font Color in Comments */
}
.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}
.comments .comments-content .user a{
color:#1982D1;
/* Author's name color */
font-size: 12px;
/* Author's name size */
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#B4B4B7;
text-align:center;
text-decoration:none;
background:#F8F8FB;
border:1px solid #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}
.comments .continue {
border-top: 0px solid #000;
}
.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}
.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
padding: 1px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}



Passo 3: salve o modelo.
*Caso você esteja utilizando o sistema de comentários anterior (sem função de resposta) siga os passos abaixo:


Passo 1: Procure por esta linha no seu modelo:
<b:loop values='data:post.comments' var='comment'>


Passo 2: Em seguida, adicione o seguinte código logo abaixo dele:
<div class='comments-new'>


Passo 3: Olhe um pouco mais para baixo e você verá o </ b: loop> código e logo acima dele, acrescentar o seguinte:
</div>


Passo 4: Agora, encontre o seguinte código:
]]></b:skin>


Passo 5: E logo acima dele, adicione este código CSS:




.comments-new{
background:#F9F9F9;
/* Background Color */
border: 1px solid #f1f1f1;
/* Bprder Style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comment-body {
color:#444444;
/* Font Color in Comments */
padding:10px;
}
.comments-new a {
padding-left: 5px; 
/* Link color */
color: #4A9BD8;
}
.comment-timestamp a {
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
.comments .avatar-image-container {
overflow: visible;
}



*(As bordas arredondadas não funcionam no Internet Explorer com CSS)
Em ambos os casos, você poderá alterar a cor de fundo em partes com anotações em verde.


Passo 6: salve o modelo.
Você pode editar algumas partes do código para alterar a cor de fundo, cor da borda e estilo da borda. *Os campos editáveis estão comentados na cor verde nos códigos mostrados acima.

Os campos editáveis são:


/* Background Color */ (Altera a cor de fundo)
/* Border style */ (Altera o estilo da borda)
/* Background color behind the replies */ (Altera a cor de fundo por trás das respostas)
/* Border on the left side of replies */ (Insere uma borda do lado esquerdo das respostas)
/* Font Color in Comments */ (Altera a cor da fonte nos comentários)
/* Author's name color */ (Altera a cor do nome do autor)
/* Author's name size */ (Altera o tamanho do nome do autor)

Confira abaixo alguns exemplos de borda e seus respectivos códigos:

border: 2px dashed #000000
border: 1px solid #0000FF
border: 4px double #FF0000
border: 3px groove #6666FF
border: 4px ridge #FFFFCC
border: 3px inset #FFFF99
border: 2px outset #6699FF



7 comentários