Personalizando a área de comentários

Personalização da área de comentários

A personalização da área de comentários permite que se destaque os comentários individualmente e dependendo do modelo que se destaque o comentário do leitor das respostas postadas a seguir.

Primeiro vá em Configurações, role a página até encontrar Feed de site e verifique se a opção "Versão completa" está marcada.

Modelos personalizados de comentários não funcionam se essa opção não estiver marcada.
Eles até ficam adicionados ao código, mas ficam escondidos nas postagens.

Depois volte até a seção Comentários e configure conforme print. Para isso, basta clicar no espaço embaixo dos títulos que as opções aparecem.

Os itens importantes são:
Local de comentários: incorporado.
Quem pode comentar: Qualquer pessoa (inclusive anônima) - permita comentários anônimos e fique à vontade para não publicar os agressivos e ofensivos.
Moderação de comentários: Sempre. Marcando sempre você vai poder analisar todos os comentários e evitar spam, agressão, links de terceiros e outros perigos.
Mensagem do formulário de contato: NÃO escreva nada aqui, se deseja que seu convite apareça antes do box de comentários.
Se colocar o texto em Configurações ele vai aparecer assim:

O texto convidando a comentar vai para baixo do container de comentários e o ideal é que fique acima, como nesse print abaixo:

A imagem com as avatares conversando é opcional. Na verdade é minha avatar e avatar da minha filha.
Mantive a imagem como sugestão para quem quer personalizar mais ainda essa área.
Uma boa ideia é colocar no lugar dessa imagem uma imagem de ícone de e-mail com o link do seu e-mail de contato.

Para obtermos esse resultado usaremos 3 códigos.

O primeiro deve ser colocado logo antes da tag ]]></b:skin> e é esse aqui:

/*---- Classe para definir uma caixa laranja ---*/
.caixa_laranja {
margin:15px 10px 5px 10px;
padding:15px 5px 5px 25px;
background: transparent;
}

Tema > Personalizar > Editar HTML - ctrl F - digite ]]></b:skin> e cole o código acima:

Depois abra a caixinha de pesquisa de novo (ctrl F) e digite <b:includable id='comment_picker' var='post'>, dando Enter:
Logo depois de <b:includable id='comment_picker' var='post'> coloque o código abaixo. Esse código já está atualizado com uma imagem de e-mail e o código linka a imagem ao e-mail do grupo. Se quiser utilizar esse código coloque o seu endereço de e-mail no lugar:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<p><center><a href="mailto:grupopspbrasil2021@gmail.com" ><img border="0" data-original-height="101" data-original-width="128" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-L04j9ypvcIK1Citn_5rLgsnkhccFEuVsKKLrnGlM5Ce_mNklmfVZJe9YhGu16TEmtwJWpKVpmWdmgDoG5IA6l-Oak1l-C9SSDJwolVh7so944b4q4TvFi_5Sfu1m1jKc23hF3Es8ToSzoouUt-1l4KXfHs5GjsSHPtq5z3Cor8YCCGMCIMQ5p2zt/s128/email-e-correspondencia-imagem-animada-0112.gif" /></a></center></p>
<div class='caixa_laranja'> Sua opinião é muito importante para nós.<br/> Compartilhe-a conosco.<br/> Só não publicaremos ofensas ou link de terceiros.<br/> Seja sempre muito bem-vindo(a).<br/></div>
</b:if>

e salve clicando no disquete no canto superior direito da página. Mas não saia da página porque iremos colocar outro código.
Se não quiser colocar imagem apague a linha <p><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEVMjmriZMtgXwQ1FS5EKlUPdtta9UKuJokVQq7q3KrPN7fhIV2QJqXSJ66Wp1DMXaWk8Y6p8IoYVAbr2qjZukYsG_xvz_u54pt2RgCsESAfBQp_FydTAna_nhykiGVzc_uLdIQ0xCBIrt/s180-Ic42/mensagem%252520de%252520texto%2525204.gif'/></center></p>.
Se quiser trocar a imagem apenas troque a url da minha imagem pela url da sua imagem.

Esses dois primeiros código irão tratar apenas da Mensagem que você vai deixar para seus leitores convidando-os a comentarem.

Atualizei também o código para criar uma caixinha para nossa mensagem:

Então o primeiro código, que vai ser colocado  logo antes da tag ]]></b:skin> e é esse aqui:

/*---- Classe para definir uma caixa laranja ---*/

.caixa_laranja {

margin:15px 10px 5px 10px;

border:3px solid #FFE7CF;

-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;

padding:15px 5px 5px 25px;

background: #F4E1C1;

}

O segundo código que deve ser colocado abaixo de <b:includable id='comment_picker' var='post'>, é esse aqui:

                <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<p><center><a href='mailto:grupopspbrasil2021@gmail.com'><img border='0' data-original-height='101' data-original-width='128' height='101' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-L04j9ypvcIK1Citn_5rLgsnkhccFEuVsKKLrnGlM5Ce_mNklmfVZJe9YhGu16TEmtwJWpKVpmWdmgDoG5IA6l-Oak1l-C9SSDJwolVh7so944b4q4TvFi_5Sfu1m1jKc23hF3Es8ToSzoouUt-1l4KXfHs5GjsSHPtq5z3Cor8YCCGMCIMQ5p2zt/s128/email-e-correspondencia-imagem-animada-0112.gif'/></a></center></p>

      <div class='caixa_laranja'> Sua opinião é muito importante para nós.<br/> Compartilhe-a conosco.<br/> Só não publicaremos ofensas ou link de terceiros.<br/> Seja sempre muito bem-vindo(a).<br/></div>

</b:if>

E o código atualizado com o ícone de e-mail resulta nesse modelo:

O próximo código é o responsável pela personalização dos containers de comentários e respostas. Há inúmeros modelos disponíveis pela internet.
Escolhi um bem clean, mas você pode pesquisar e escolher outros.
Não importa qual você vai escolher.
Independente da sua escolha os códigos acima permanecem os mesmos, SE você quiser que a mensagem apareça acima dos comentários.

Depois abra novamente a caixinha de pesquisa escreva /* Comments.


Tudo o que estiver entre


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


e


/* Footer
----------------------------------------------- */


deve ser apagado e um novo código adicionado.


O código atual é:

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
}

.comments .continue {
border-top: 2px solid $(tabs.border.color);
}


/* Footer
----------------------------------------------- */

E vamos trocar por:

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


.comments { margin-top: 10px; padding: 10px 0px; }
.comments h4 { font-size: 14px; color:#800000; 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: 10px; }
.comments .comments-content .comment { margin-bottom: 0; padding-bottom: 0; }
.comments .comment-block { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVk4QDKD1xXn3NQ7ZmWPKK43yKW-EEVOisb_obmsUus9PBHk7tJdyGPA39KeW-1fSu9-FPVsrB51UMJphZY1DwfihTfvpoN-qTTfjejlLSLgGMi3TgTp6goheNgoktf_sSnZIcUr0EE1V8qVUAugY6yk5-IG3hKVV4BHZ0K_-L5kxxoZqGNaKLuDmJ/s200/pattern%20Gisa%20VF%207.jpg); padding: 20px; border: #800000 2px solid; -moz-border-radius: 20px;-webkit-border-radius: 20px; border-radius: 20px; font-size: 20px;}
.comments .comments-content .comment-header a { text-transform: capitalize; }
.comments .comments-content .user { display: block; font-weight: bold; font-size: 20px; }
.comments .comments-content .datetime { margin-left: 0; }
.comments .comments-content .datetime a { color: #800000; font-size: 12px; text-transform: uppercase; }
.comments .comments-content .comment-header, .comments .comments-content .comment-content { margin: 0 10px 0 0; padding: 15px 0 0 0; }
.comments .comment-block .comment-actions { display: block; text-align: right; }
.comments .comment .comment-actions a { background: #E9B0A7; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius:2px; font-style: italic; font-size: 14px; color:#800000; line-height: normal; margin: 10px; padding: 5px 8px; }
.comments .comment .comment-actions a:hover { text-decoration: none; }
.comments .thread-toggle { display: none; }
.comments .comments-content .inline-thread { margin: 0 0 20px 35 px !important; padding: 30px 0 0 30px; }
.comments .continue { display: none; }
.comments .comments-content .icon.blog-author {position: absolute; top: 10px; right: 30px; margin: 0; width: 36px; height: 36px;}
.comments p{color:#800000}


/* contador comentarios
------------------------- */
.comment-thread ol {
counter-reset: contarcomentarios;
}
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 16px;
color: #800000;
padding:30px;
padding-top: 10px;
position:relative;
z-index:2;
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 13px;
color:#800000;
padding:26px;
position:relative;
z-index:2;
}


/* Footer
----------------------------------------------- */

Esse:

por esse:

Clique no disquete e espere as mensagens aparecerem:

No código você pode alterar as seguintes linhas:


1- Na linha:
.comments h4 { font-size: 14px; color:#800000; margin: 0 0 25px; padding: 20px 0; text-transform: capitalize; } altere a cor e o tamanho da data e hora do comentário.


2- Na linha:
.comments .comment-block { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVk4QDKD1xXn3NQ7ZmWPKK43yKW-EEVOisb_obmsUus9PBHk7tJdyGPA39KeW-1fSu9-FPVsrB51UMJphZY1DwfihTfvpoN-qTTfjejlLSLgGMi3TgTp6goheNgoktf_sSnZIcUr0EE1V8qVUAugY6yk5-IG3hKVV4BHZ0K_-L5kxxoZqGNaKLuDmJ/s200/pattern%20Gisa%20VF%207.jpg); padding: 20px; border: #800000 2px solid; -moz-border-radius: 20px;-webkit-border-radius: 20px; border-radius: 20px; font-size: 20px;}

você pode trocar a url da pattern por outra pattern ou colocar uma cor sólida.
Para colocar uma cor sólida troque :

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVk4QDKD1xXn3NQ7ZmWPKK43yKW-EEVOisb_obmsUus9PBHk7tJdyGPA39KeW-1fSu9-FPVsrB51UMJphZY1DwfihTfvpoN-qTTfjejlLSLgGMi3TgTp6goheNgoktf_sSnZIcUr0EE1V8qVUAugY6yk5-IG3hKVV4BHZ0K_-L5kxxoZqGNaKLuDmJ/s200/pattern%20Gisa%20VF%207.jpg);

por

background: #800000; (o código da cor que deseja).

Ainda nessa linha você pode deixar os cantos retos trocando o código:

-moz-border-radius: 20px;-webkit-border-radius: 20px; border-radius: 20px;

por

-moz-border-radius: 0px;-webkit-border-radius: 0px; border-radius: 0px;

Pode ainda trocar a cor, o formato e a espessura da borda.
Para trocar o estilo basta trocar solid por: dashed ou dotted ou ridget ou inset ou outset ou none ou groove ou double.

3- Na linha:
.comments .comment .comment-actions a { background: #E9B0A7; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius:2px; font-style: italic; font-size: 14px; color:#800000; line-height: normal; margin: 10px; padding: 5px 8px; }
Você pode trocar a cor dos botões responder e excluir e trocar o estilo, tamanho e cor da fonte.

4- Na linha:
.comments p{color:#800000}
você pode trocar a cor da fonte do texto principal e das respostas dos comentários.

Fazendo uma pesquisa Google usando os termos: modelos de comentários personalizados no blogspot, você irá encontrar inúmeros outros modelos.

Estou disponibilizando esse template personalizado para quem quiser fazer um teste ou para quem quiser personalizar em cima da minha personalização. 

É mais fácil achar os códigos usando algumas palavras chaves que já conhecemos ou vimos em um tuto.

Mas atenção: a postagem e a página não vão junto porque é outro download. 

Quando fazemos o download do tema só vai o template, como já expliquei aqui.

Se quiser ver o blog demonstrativo clique no link abaixo:

Eu apliquei o efeito soft plastic nas patterns das bordas, mas o efeito some quando a cor é muito escura.

Faça o download:

    

Salve o template em uma pasta e dezipe o arquivo.

Crie seu blog de testes como explicado aqui.

Não precisa escolher um tema já que vai usar meu template personalizado.

Vá em Tema > Personalizar > Restaurar:

Clique em "Fazer upload":

Procure a pasta onde salvou o template e dê 2 cliques nele:

Aguarde aparecer a mensagem "Tema restaurado" no canto inferior esquerdo:

O blog estará assim:

Agora é só estudar ou modificar a gosto.

Divirtam-se.

Dúvidas mande um e-mail.