[Serviços] - Como destacar os comentários do autor no DISQUS

Se você acompanha o blog desde o início ou já leu todos os artigos aqui do blog, você deve ter reparado que eu já escrevi diversos artigos sobre sistemas de comentários. Dentre esses artigos, eu já mostrei como diferenciar os comentários do autor do blog, para aqueles que utilizam o formulário de comentários do próprio Blogger. Porém, no artigo de hoje eu mostrarei como diferenciar os comentários do autor para quem utiliza o formulário de comentário do DISQUS.


Se você ainda não utiliza o formulário de comentário do serviço DISQUS e gostaria de experimentá-lo, clique no link abaixo para saber como instalá-lo em seu blog.

Diferenciando o comentário do autor no sistema DISQUS


INFORMAÇÃO: é importante que você saiba, que a customização dos comentários do autor, através do painel de controle do DISQUS, só funciona para quem utiliza a versão Classic (Clássica) do sistema. Usuários do sistema na versão 2012 não conseguirão seguir este tutorial, portanto, deverão retornar para a versão Clássica antes de segui-lo.

1. Acesse o endereço: http://www.disqus.com, e faça login em sua conta. Após ter logado em sua conta, clique no menu Admin, localizado no canto superior direito do site.

2. Em seguida, clique no menu Settings, localizado no canto direito da página, e depois clique na aba Appearance. Role a página até o fim e, dentro da seção Custom CSS, adicione o código mostrado abaixo.

/* Diferenciação do comentário do autor no DISQUS */
#dsq-content .dsq-moderator .dsq-comment-header {
background: #XXXXXX url(link-da-imagem-de-fundo) repeat-x left top !important;
}

#dsq-content .dsq-moderator .dsq-comment-header a:link,
#dsq-content .dsq-moderator .dsq-comment-header a:visited {
color: #XXXXXX !important; /* cor do nome do autor */
text-decoration:none !important;
}

#dsq-content .dsq-moderator .dsq-comment-header a:hover {
color: #XXXXXX !important; /* cor do nome do autor com o mouse em cima */
text-decoration:underline !important;
}


Para a sua alegria, querido leitor, eu criei algumas imagens que irão gerar um efeito muito bonito aos seus comentários. Basta você olhar a tabela abaixo, e fazer as alterações no código acima antes de colá-lo no DISQUS. A parte destacada em azul deve ser substituída pelo código hexadecimal da cor que você quer, e a parte destacada em vermelho deve ser substituída pelo link da imagem de fundo.

Clique com o botão direito na imagem de fundo e escolha a opção “Salvar imagem como”.
Código Hexadecimal Imagem de fundo Resultado
(Clique para ampliar)
#C7C7FF
#C7EBD9
#C7FFC7
#D0E4F6
#E9C7FF
#FFC7C7
#FFC7FF
#FFE9C7
#FFFFC7

Substitua também a parte destacada em rosa pelo código hexadecimal da cor que você quer para o texto do nome do autor e dos leitores que comentarem — escolha uma cor que combine com a cor da imagem de fundo que você irá utilizar. Se você tiver conhecimentos sobre CSS, poderá alterar o código de modo que combine melhor com o template do seu blog. Você pode utilizar a imagem que você quiser também, não precisa ser as imagens que eu forneci acima.

3. Após adicionar o código no campo de CSS do DISQUS, e ter feito todas as alterações como desejado, clique no botão Save Changes para salvar a alteração.

NOTA: você pode adicionar o código que foi mostrado acima diretamente na estrutura do seu template, mas é recomendado que você adicione-o através do DISQUS, como indicam os passos.

Após ter salvo as alterações, basta acessar o seu blog e verificar se seus comentários estão aparecendo de forma diferenciada com relação ao comentário dos leitores. Se o seu blog possui mais de 1 autor, você deverá acessar sua conta do DISQUS e adicionar tais autores como moderadores, para que os comentários dos mesmos também sejam afetados pela customização. Se você gostou do artigo, achou ele útil ou ficou com dúvidas sinta-se a vontade para participar postando um comentário.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 18 comentários neste artigo!

  1. Muito útil, parabéns!

    ResponderExcluir
  2. Olha que bacana...

    Funciona só com as cores ou se eu puser uma imagem também vai?

    ResponderExcluir
  3. Sybylla, fico feliz que tenha gostado! Quanto à sua pergunta, o código funciona com CSS normalmente, portanto, você pode usar apenas uma cor; apenas uma imagem; uma cor e uma imagem etc., tudo irá depender do efeito que você quer. Com conhecimentos em CSS é possível customizar os comentários como desejar. Volte sempre, abraços.

    ResponderExcluir
  4. Ótima dica! Sabe como faço isso no IntenseDebate?

    ResponderExcluir
  5. Fique Sabendo, eu nunca tentei isso no Intense Debate, pois, por padrão, os comentários do autor já possuem uma diferenciação, mas creio que seja possível mudar também, irei fazer alguns testes e se descobrir algo, postarei um artigo ensinando.

    ResponderExcluir
  6. Ok, Igor, estarei esperando pela postagem.

    ResponderExcluir
  7. Muito interessante. Tbm não sabia disso... Mto louco esse sistema!

    ResponderExcluir
  8. Obrigado, bom tutorial.

    ResponderExcluir
  9. Ah, gostei. Estou começando a desenvolver um novo template para meu blog e acabei de instalar o Disqus. Obrigado pela dica.

    ResponderExcluir
  10. Igor..sou nova por aqui, e ainda tenho uma duvida! rs
    não estou entendendo como colocar o link da imagem. Eu salvei ela certo? Mas na hora que vc diz pra colocar o link fiquei um pouco perdida...
    Mas mesmo assim seus tutoriais são ótimos e adorei !
    Obrigada

    ResponderExcluir
  11. Liviasadala, para colocar o link da imagem, basta você ir no site onde você a hospedou, e clicar sobre ela com o botão direito do mouse, em seguida, no menu que se abrir, escolha a opção Copiar URL da imagem. Depois, basta apagar a frase link-da-imagem-de-fundo e colar (Ctrl+V) o link da imagem. Espero que isso lhe ajude. Desculpe a demora em responder!

    ResponderExcluir
  12. Gostei bastante da dica *-*

    ResponderExcluir
  13. Oi eu queria saber como coloco o Disqus em portugues no blogger ??
    Pq tem muita gente q entra no meu Blog que não sabe falar Ingles e fica um poquinho dificio para eles Obrigado

    ResponderExcluir
    Respostas
    1. Olá Galera Sem Classe, a equipe do DISQUS está fazendo diversas modificações em seu sistema, tanto que o próprio site deles foi reformulado, assim como o gadget de formulário de comentários. Devido a todas essas mudanças, o novo formulário deles não suporta ainda idiomas que não sejam o inglês, isso de acordo com as próprias explicações dada por eles. Em breve tudo deverá voltar ao normal e ficar em português. Mas caso queira conferir se seu formulário está configurado para ficar em português, faça login no site do DISQUS, clique no link "Admin", e em seguida na aba "Seetings", neste menu procure pela opção "Language" e altere para "Portuguese (Brazil)". Espero ter respondido sua pergunta.

      Excluir
  14. Olá, gostaria de alterar o tamanho da fonte e destacar o comentário do autor porém não acho a aba Custom CSS
    Vou em Settings escolho meu site mas depois as abas que aparecem são:
    General/ Discovery/ moderators/ Filters/ Advanced...
    Pode me ajudar?
    Abraço

    ResponderExcluir
    Respostas
    1. Olá Gustavo, a opção de "Custom CSS" só aparece para quem estiver usando o formulário Clássico do DISQUS. Não sei se você notou, mas a aparência do DISQUS mudou recentemente, e isso se deve a uma melhoria que está sendo feita no sistema de comentário deles, e que a equipe do site DISQUS está chamando de "DISQUS 2012". Quem está usando a versão 2012 não verá a opção de customização, pois o formulário mudará a cor dos links e opções de acordo com o template usado no blog. Caso você queira voltar a usar a versão antiga para poder customizar seus comentários, vá na aba "General", e desmarque a opção "Enable Disqus 2012 features for your site", em seguida role a página até o final e clique sobre o botão "Save Changes". Após ter desativado a opção, você encontrará o campo "Custom CSS", na aba "Appearance" localizado ao lado da aba "General". Ai você poderá seguir o tutorial normalmente. Espero que isso te ajude.

      Excluir