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, não deixe de conferir os modelos de comentários personalizados que já temos só no ponto de modificar no blog!


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): Copie o Código Aqui

.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): Copie o código aqui!
#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) Copie o código aqui:



.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: Veja aqui os 4 códigos abaixo e copie se preferir.

<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: Copie o código abaixo aqui!




.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



Universo das Dicas - Anna Vlis

7 comentários