Separar os comentários do blogger

Procurei na internet como separar os comentários do blogger, foi muito difícil mais encontrei um blog em espanhol "Cuidad Blogger" que explicava como separar os comentário de diversas maneiras, assim deixando a área dos comentários mais organizada.

Antes de mais nada faça o DOWNLOAD do seu template em BAIXAR MODELO COMPLETO, para evitar transtorno

1º Colocar um limite abaixo do comentário, este método é simples, mas eficaz:

Créditos da imagem à Cuidad Blogger

Entre em Design/Editar HTML e procure por ]]></b:skin> antes desta tag cole o código abaixo:

#comments-block .comment-footer {
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

2º Podemos fazer o mesmo, mas usar imagem para separar:

Créditos da imagem à Cuidad Blogger

Neste caso utilize o código abaixo:


#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6W-ndzSOH-z3lg79iem4oEFGldVS4O6nKfI3El0KDrNitTo3vLFjj5lCjCv3y8QW2y8heU-Rcse1TCy6EL7sDbv_9Gk87ZVfK3qstUVazfWwM8O1VBRicbWXSR9wRu-zi8jq41Cdw4GM/);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

A Url que está em azul você pode alterar pela Url da sua imagem, lembre-se de alterar a altura da imagem sempre com 20px a mais do que o tamanho real da imagem, exemplo: imagem de 30 px de altura, o código ficará assim: height: 50px; 

3º Enquadrando o comentário, adicionando cor de fundo e borda:

Créditos da imagem à Cuidad Blogger

Para colocar este efeito no blog entre em Desing/Editar HTML e marque a caixa Expandir modelos de widgets, procure pela tag abaixo: "Dica: presione ctrl+F para procurar a tag"


<b:loop values='data:post.comments' var='comment'>

Abaixo dela coloque a tag:


<div class='comentarios-cb'>

Agora logo mais abaixo procure por </b:loop> antes dela feche a div com o código

</div>

Agora procure por ]]></b:skin> e coloque o seguinte código antes dela.


.comentarios-cb {
background:#E6E6E6; /* Cor do fundo */
border-top:1px solid #240B3B; /* Borda superior */
border-bottom:1px solid #240B3B; /* Borda inferior */
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Cor de fundo dos comentarios */
}
.comment-timestamp { /* Hora dos comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}



Salve sua alteração e confira o resultado.