Personalizando a caixa de comentários do Blogger
Hoje vou compartilhar com vocês alguns hacks para personalizar a caixa de comentários. Todos eles estão no blog do Compulsivo mas não sei se todos os meus leitores também são leitores dele (acredito que sim, pois o cara é fera) então, resolvi postar aqui também estas dicas preciosas!
IMPORTANTE: Para encontrar os trechos solicitados no tutorial, vá em layout, procure por editar html e clique sempre em expandir modelos de widgets.
DESTACANDO A ÁREA DOS COMENTÁRIOS
Para incluir um ícone destacando a área dos comentários, encontre a linha abaixo(Crtl+F) e onde está em vermelho substitua pela url do ícone.
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<img src='http://IMAGEM.png'/>
<b:if cond='data:post.numComments == 1'> 1 Comentário: <b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
Sugestão de site de ícones:
Exemplo:
DESTACANDO OS COMENTÁRIOS DO AUTOR
Para destacar os comentários do autor do blog e procure pelo código abaixo:
<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'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Inclua as partes em vermelho.
Dica: copie ele inteiro e cole entre as tags <dl id='comments-block'> e </dl>
Depois procure pela área do CSS, entre as tags <head></head> e cole o código 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;
}
Personalize as cores da borda e do fundo a seu gosto!
ALTERANDO O LINK DO AUTOR
Para que seus comentários não sejam direcionados para o seu perfil do Blogger, procure pelo código abaixo, inserindo a linha em destaque.
<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>
INSERINDO ICONE DOS COMENTÁRIOS DO AUTOR
Procure pelo mesmo código anterior e insira a linha em vermelho, substtuindo a url
<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'>
<img src='http://URL_DA_IMAGEM/Imagem.png'/>
<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>
Exemplo:
Neste exemplo vemos os 03 hacks já aplicados.
Postar um comentário