Personalizar Container geral de comentários ( comments-block )

Agora que você já conseguiu se familiarizar melhor com essa área do blog, e já sabe desvendar e identificar o que cada código significa,vai aprender a customizar cada parte na área de comentários. Você vai aprender a aplicar estilos a cada item do bloco de comentários.
Hoje vamos iniciar aprendendo a aplicar estilos ao container geral (bloco de comentários – “comments-block“)

Apenas para relembrar, o “comment-block” , abre o bloco de comentários. Se refere ao container geral dos comentários. ((Veja a imagem demonstrativa))

Nesta parte podemos aplicar vários estilos, como bordas, colocar uma cor de fundo diferente para dar mais destaque ao container geral dos comentários, e podemos também, colocar uma barra de rolagem, que é uma opção de se ganhar um pouco mais de espaço, se for o caso.

Para personalizar esse trecho, requer uma inclusão no código CSS, visto que nos templates padrões do blogger, não possuem a linha CSS para aplicar estilos a esta parte.
O que vamos fazer é inserir o código CSS aplicável ao bloco geral de comentários e definir os estilos que desejamos a ele.

Entre no painel do blogger , acesse o menu “modelo”, clique em “Editar html” (não precisa marcar a opção “expandir modelos de widget”).
Procure no seu template os trechos CSS que se referem aos comentários. Geralmente está assim:

/* Comments
-------------

Será nesse trecho que você irá colar o código CSS para definir os estilos.
Caso não encontre, localize a tag ]]></b:skin>
e cole ANTES dela o código a seguir :

 
.comments { 
background:#ffffff; /* ---Coloque a cor de fundo ---*/ 
margin: 15px 0px 10px; /* ---edite as medidas ---*/ 
width: auto; /* ---defina a largura se quiser ---*/ 
padding: 10px; /* ---edite as medidas ---*/ 
border:2px solid #723233; /* ---Coloque borda se quiser ---*/ 
} 

No código acima, não se esqueça que você deverá editar as partes que estão marcadas e destacadas em vermelho.
Na linha que se refe a largura (width) você preferir, pode colocar a mesma medida que tiver sua área total de postagem, caso algo fique desalinhado, vá ajustando a largura e as medidas até atingir o resultado que você quer.

Colocar barra de rolagem no container geral dos cometários:

Se quiser incluir uma barra de rolagem para fazer rolar todos os comentários que já foram publicados, basta incluir algumas linhas no trecho que você acabou de inserir no código CSS.
Procure por:

.comments

E acrescente as linhas:

 
height: 400px; /* ---edite a altura ---*/ 
overflow: auto; 

Devendo ficar assim:

 
.comments { background:#ffffff; /* ---Coloque a cor de fundo ---*/ 
margin: 15px 0px 10px; /* ---edite as medidas ---*/ 
width: auto; /* ---defina a largura se quiser ---*/ 
padding: 10px; /* ---edite as medidas ---*/ border:2px solid #723233; /* ---Coloque borda se quiser ---*/ 
height: 400px; /* ---edite a altura ---*/ 
overflow: auto; 
} 

height: 400px; é a altura total que terá o container geral de comentários (bloco de comentários).
O comando overflow: auto; faz como que a barra de rolagem apareça automaticamente, apenas se altura do container geral de comentários ultrapassar os 400px.

Recomendo que você leia todos os tutoriais desta série: Desmembrando a área de comentários, pois tenho certeza que no final da série você vai conseguir personalizar sua área de comentários da maneira que desejar.