Personalizar comentários no Blogger

Um blog é uma comunidade aberta e uma das melhoras formas de participar nessa comunidade é deixando comentários no final dos artigos que você gostou ou que lhe ajudaram de alguma forma, debatendo os assuntos explorados, deixando a sua opinião e mostrando apreço e reconhecimento pelo autor. No Blogger, o bloco de comentários não é dos mais aprazíveis, mas há algumas coisas que podemos fazer para personalizar os comentários no blogger. Hoje vou-lhe mostrar como fazer dois melhoramentos no bloco de comentários.

Como sempre, recomendo-lhe que antes de efectuar qualquer alteração no código do seu template faça um backup do layout e conteúdo do seu blog.

Destacar comentários do autor no Blogger

Esta é uma forma de diferenciar os comentários do autor, dos comentários dos leitores, destacando-os com uma cor de fundo e borda diferente. Torna-se especialmente útil quando sem tem muitos comentários.

No painel do Blogger entre em Layout -->Editar HTML e clique em "Expandir modelos de widgets". Procure por esta linha de código e inclua os trechos a vermelho no local indicado.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'> <dd class='blog-author-comment'> <data:comment.body/> </dd> <b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</dd>
</b:if>

<dd class='comment-footer'>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>

</dd>
</b:loop>
</dl>

Seguidamente nas definições de CSS do template, entre as tags <head> e </head>, procure pelo trecho que define a formatação dos comentários. Após esse trecho, cole as linhas abaixo:

. blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}

Nos números a vermelho definem-se as cores da borda e a cor do fundo, respectivamente. Pode alterar esses parametros a seu gosto. Salve e veja o resultado.

Nota: Este destaque aplica-se também aos comentários já publicados, mas só funciona com comentários feitos usando a sua conta do Google. Os comentários feitos com OpenID não ficam destacados.

Alterar o link do autor nos comentários do Blogger

Por defeito, o link do autor nos comentários aponta para o seu perfil no Google, uma vez que usou a sua conta para os fazer. Se você tiver optado por não permitir visualizações ao seu perfil, o link de nada serve.

Para além disso, a página do seu perfil pode não ser o link mais interessante para mostrar. Assim, você tem a opção de decidir para onde vai apontar o seu link de autor.

Vamos ao código. No painel entre em Layout -->Editar HTML e clique em "Expandir modelos de widgets". Localize a seguinte linha de código:

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Substitua tudo por:

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

O que está indicado a vermelho define o destino do link, que neste caso é uma variável do Blogger que aponta para a sua Home Page. Se preferir alterar o destino, mude essa linha para:

<a href='http://oseulink.com'>

substituindo o que está a azul pelo seu link. Salve e confira o link.

Estas são algumas personificações que pode fazer no bloco de comentários que ajudam a melhorar a usabilidade e aspecto dos mesmos.

Entretanto, aproveito para o convidar a participar desta comunidade que também é sua, porque "isto sem si, não tem graça nenhuma!".

Fonte: Usuário Compulsivo