Personalizar os Comentários do Blog com Estilo Profissional

Modifique os comentários do blog aplicando um estilo profissional que ainda possibilita opções de personalização.

Inegavelmente, a área de comentários do blog é um espaço de muita importância e que possibilita a “aproximação” do blogueiro com o leitor. E, como nessas partes fundamentais deve ser dada uma atenção especial, personaliza-las pode influenciar e atrair a atenção dos leitores para o fim determinado. Porém, muitas vezes você não deseja simplesmente modificar o estilo de alguma parte de seu blog, quer deixa-la com um design profissional.

Área de Comentários do Blogger com Estilo Profissional

Nesse artigo, trazemos uma opção de personalização que deixará a área de comentários de seu blog como nos melhores templates encontrados na web com design profissional. Além disso, você não simplesmente terá uma nova parte de destaque em suas páginas como também poderá combinar com as cores predominantes nas mesmas. O tutorial é bem simples, não requer nenhum conhecimento específico e nem configurações complicadas. Com apenas a aplicação de estilos CSS, os comentários do blog modificarão totalmente e se adequarão as novas tendências utilizadas.

Outro ponto positivo a ser citado nesse estilo, é que o mesmo já contém a opção de destaque dos comentários do autor do blog, fazendo com que, todos os comentários feitos por você respondendo a seus leitores tenham uma diferença dos demais graças a uma imagem que aparecerá com o nome “Author”, imagem essa que também poderá ser substituída caso preferir algo diferente.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

 Atenção: Para que funcione, será necessário excluir o estilo CSS dos comentários já contidos no seu blog. Caso não saiba identificá-lo, ele pode ser parecido com o código do tutorial e também em alguns templates pode ser encontrado pesquisando por /* Comments

Como Personalizar os Comentários do Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

/* Comments
----------------------------------------------- */
.comments { border-top: 1px solid #eee; margin-top: 30px; padding: 25px 0px; }
.comments h4 { font-size: 30px; margin: 0 0 25px; padding: 20px 0; text-transform: capitalize; }
.comments .comments-content .comment-thread ol { overflow: hidden; margin: 0; }
.comments .comments-content .comment-thread ol li { list-style: none outside none; }
.comments .comments-content .comment:first-child { padding-top: 0; }
.comments .comments-content .comment { margin-bottom: 0; padding-bottom: 0; }
.comments .avatar-image-container { max-height: 50px; width: 50px; }
.comments .avatar-image-container img { max-width: 50px; width: 150%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
.comments .comment-block { background: #FBFBFB; border-bottom: 1px solid #EEE; margin-left: 72px; padding: 14px 0 0 20px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.comments .comments-content .comment-header a { text-transform: capitalize; }
.comments .comments-content .user { display: block; font-weight: bold; }
.comments .comments-content .datetime { margin-left: 0; }
.comments .comments-content .datetime a { color: #333; font-size: 10px; text-transform: uppercase; }
.comments .comments-content .comment-header, .comments .comments-content .comment-content { margin: 0 20px 0 0; }
.comments .comment-block .comment-actions { display: block; text-align: right; }
.comments .comment .comment-actions a { background: #FFFFFF; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius:2px; font-style: italic; font-size: 12px; line-height: normal; margin: 1px; padding: 5px 8px; }
.comments .comment .comment-actions a:hover { text-decoration: none; }
.comments .thread-toggle { display: none; }
.comments .comments-content .inline-thread { border-left: 1px solid #FBFBFB; margin: 0 0 20px 35px !important; padding: 0 0 0 20px; }
.comments .continue { display: none; }
.comments .comments-content .icon.blog-author {position: absolute; top: 0px;right: 0px; margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYHQnDW9nv-Cwb60zoRmf8nH6eP7Gl2LODn-Fhm4yVUf1l0M4es465aitTMcZ9eeRYzFuW6XBo1McfcaaU5TdC0VCK_Jyo9nD24k72y1XgWok1uWu9B4nD5prdxwuFBL2cSHO58vdItA/s1600/author.png); width: 36px; height: 36px;}

Configuração:

* Destacado em LARANJA, cor de fundo dos comentários.

* Destacado em VERDE, cor e tamanho da data dos comentários.

* Destacado em AZUL, cor de fundo dos itens "Responder" e "Excluir".

* Destacado em VERMELHO, é a imagem que definirá que os comentários são do administrador do blog, altere caso desejar.

* Caso desejar colocar uma cor específica ao texto dos comentários, acrescente ao código o trecho .comments p{color:#222} substituindo o #222 por sua cor desejada.

>> Clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Após a conclusão do tutorial, os comentários de seu blog já devem estar com o novo estilo aplicado. Porém, caso não tenha ficado como desejado, não se esqueça que é necessário a exclusão de todo o CSS referente ao estilo anterior. Também é possível que em templates personalizados a aplicação desse código não tenha o resultado esperado por questão de alterações no código padrão da área de comentários.

Deixe seu comentário, pois ele é a motivação para nosso trabalho