Destaque no comentário do autor no Blogger

Considero importante em um blog ver os comentários do autor destacados em relação aos demais comentaristas.

No entanto, após o lançamento das respostas de comentários no Blogger, praticamente todos os códigos existentes para destacar o comentário do autor nessa plataforma deixaram de funcionar.

Agora, alguns meses após a alteração, já são conhecidas formas para dar essa destaque – algumas bastantes simples.

Lendo este artigo, você aprenderá a fazer isso em seu blog.

Introdução

Antes de existirem as respostas para os comentários no Blogger, era praticamente obrigatório fazer o destaque dos comentários do próprio autor do artigo.

Sem isso, todos os comentários ficavam juntos e era difícil diferenciar os comentários das respostas deixadas pelo autor.

Com o lançamento das respostas, os comentários ficaram mais organizados.

Agora, quando o autor responde um comentário, ele é automaticamente colocado em destaque em relação ao comentário original, um pouco deslocado à direita.

Mas, quando um leitor responde o comentário do outro (o que é normal e bastante positivo) a confusão volta a reinar, pois novamente não há distinção entre essas respostas e as do autor. 

Felizmente, o Blogger disponibilizou um mecanismo bastante simples para fazer o destaque, bastando alterar a área de CSS do template.

São possíveis duas alterações com esse mecanismo simples:

• Adicionar uma imagem com os comentários do próprio autor.
• Alterar a cor de fundo do texto do nome do autor.

Neste artigo, você aprenderá como customizar o seu template para que os seus próprios comentários fiquem destacados dos demais.

IMPORTANTE: É altamente recomendável que você faça estas alterações antes em seu blog de testes, para validar se ficarão de acordo com seu gosto, e só depois aplicá-las em seu blog oficial. Caso ainda não tenha um blog de testes, leia o artigo Como criar um blog de testes no Blogger.

Adicionando uma imagem com os comentários do autor

A primeira opção de destaque do comentário do autor é a colocação de uma imagem junto ao texto ou ao ícone.

Esta foi a opção que adotei aqui no Gerenciando Blog.

Abaixo está um exemplo de comentário com esse destaque, mostrando a figura no canto superior direito de meu comentário:

Abaixo estão as instruções para você fazer o mesmo em seu blog.

1. O primeiro passo é você criar a imagem que você utilizará como destaque.

Para isso, pode ser utilizado qualquer programa de edição de imagens, como o Paint.net, que citei no artigo 5 ferramentas grátis para apoiar seu blog.

Neste exemplo utilizarei a imagem que adicionei aqui no Gerenciando Blog.

2. O segundo passo é você gerar o código que você adicionará ao seu template.

Para adicionar a imagem, é necessária apenas uma instrução, mostrada abaixo:

.comments .comments-content .icon.blog-author{
position:absolute;
top:-11px;
right:0px;
margin:0;
background-image: url(http://gbscripts.webs.com/Imagens/AutorGB1.png);
width:61px;
height:24px
}

Há alguns pontos que você pode alterar, se desejar:

• top / right: Estes atributos indicam onde a imagem deve ficar. Você pode em meu caso, ela está na parte superior (top) e à direita (right). Se preferir, você pode movê-la para a esquerda (left) ou mesmo para o final (bottom) do seu comentário. Os números à frente indicam o número de pixels para ajustar a posição da imagem.
• background-image: Aqui você deve colocar o endereço da imagem que utilizará para mostrar com os seus comentários. Ela deve estar na internet, e não em seu computador. Em caso de dúvidas, sugiro a leitura do artigo Webs, ótimo site para hospedar seus arquivos.
• width / height: Se você alterar a imagem, deve colocar nestes atributos a largura (width) e a altura (height) da nova imagem.

3. O terceiro passo é fazer a edição do seu template e adicionar a ele o novo código.

Acesse http://www.blogger.com, vá à área “Modelo” do seu blog e clique em “Editar HTML”.

 

4. Clique no botão “Prosseguir” na imagem de alerta que será exibida.

IMPORTANTE: Antes de continuar, é importante você fazer um backup do seu modelo, para poder voltá-lo em caso de problemas. Para isso, copie todo o código exibido em um arquivo do Bloco de Notas e salve-o. Se houver problemas, basta voltar a utilizar esse modelo em seu blog.

5. Localize o trecho “</b:skin>” do código do seu template.


Antes dessa linha cole o código do item 2 destas instruções e clique no botão “Salvar modelo”.

Pronto! Acesse um artigo que tenha comentários feitos pelo próprio autor do artigo e você verá o destaque.

Outra opção de código que testei (e estou utilizando no TD Séries) é adicionar a informação de autor logo abaixo de sua foto de perfil. Veja abaixo como ficou o resultado:

 

Isso é feito seguindo exatamente o mesmo procedimento.

As únicas diferenças estão na figura de destaque e no código utilizado, que faz com que ela fique posicionada exatamente abaixo da foto.

Abaixo está o código utilizado.

Você pode precisar ajustar a imagem para que ela fique do tamanho exato da foto e também as propriedades destacadas em vermelho para posicioná-la corretamente.

.comments .comments-content .icon.blog-author{
position:absolute;
top:38px;
left:-48px;
margin:0;
background-image: url(http://gbscripts.webs.com/Imagens/AutorGBSimples32.png);
width:36px;
height:13px
}

Alterando a cor de fundo do texto do nome do autor

A outra forma para você destacar os comentários do próprio autor é realizando mudanças visuais (cor da fonte, cor do fundo).

Esta forma pode ser aplicada sozinha ou em conjunto com a técnica anterior. O resultado será similar à figura abaixo:

 

Para conseguir esse efeito, basta você adicionar o código abaixo ao mesmo trecho indicado no item anterior.

O ponto destacado em vermelho indica a cor de fundo, que você pode alterar conforme sua necessidade.

cite.blog-author {
background: none #11F7FF;
}

Outras customizações das respostas dos comentários

O que mostrei aqui foram apenas as duas alterações mais simples que podem ser feitas no novo modelo de comentários do Blogger.

Intencionalmente eu foquei as duas alterações simples que podem se adequar a qualquer estilo de template, desde os básicos do Blogger (como o TD Séries) até os customizados (que é o caso do Gerenciando Blog).

Assim, você mesmo poderá adequá-los ao seu template.

Claro que é possível fazer muito mais, alterando outros elementos do CSS referentes à área de comentários.

Foi isso que fiz no Gerenciando Blog, para mostrar as caixas com fundo cinza ao redor de cada comentário.

Como se trata de um assunto que já foi bem explorado em outros blogs, abaixo citarei alguns tutorias interessantes e bastante completos sobre o tema, para que você escolha a melhor opção para o seu caso:

• Templates e Acessórios: Dar estilo aos comentários do novo Blogger
• Crazyseawolf’s Blog: Como customizar o CSS dos Threaded Comments do Blogger
• Spice Up Your Blog: Three Color Styles For Blogger Threaded Comments With Author Comments Highlighted

Conclusão

Destacar os comentários do autor é uma forma interessante para organizar sua área de comentários.

Assim, seus visitantes poderão diferenciar rapidamente os comentários e respostas que você mesmo escreveu.

Espero que este tutorial seja útil para fazer isso em seus próprios modelos!

E você, o que achou dessa possibilidade?

Já aplicou alguma customização em seu template para destacar os comentários do autor?

Deixe um comentário!