03 janeiro 2010

Hacks para personalizar a caixa dos comentários do blogger

Quando estava editando o meu layout procurei por códigos que me ajudassem a deixar minha caixa de comentários personalizada e com minha cara. Foi ai que eu achei algums códigos HTML que foram uma mão na roda e como ta na web e hora de compartilhar com vocês através do Pelo Estilo.

Destacar a área dos comentários

1- Faça login com sua conta da Google no Blogger, vá em “Layout”, procure por editar html e clique em expandir modelos de widgets.
2- Agora encontre o código abaixo no seu html. Para localizar utilize (Crtl+F) do seu teclado.
Para encontrar seus ícones recomendo os sites: Icon Archive e iconspedia
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<imgsrc='http://IMAGEM.png'/>
<b:if cond='data:post.numComments == 1'> 1Comentário: <b:else/>
<data:post.numComments/><data:commentLabelPlural/>:
</b:if>
</h4>
Destacando os comentários do autor

Faça login com sua conta da Google no Blogger, vá em “Layout”, procure por editar html e clique em expandir modelos de widgets.

Para destacar os comentários do autor do blog 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:ifcond='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'>
<spanclass='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='commentpermalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Inclua as partes que está em negrito

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;
}
Mude a cor e o plano de fundo como quiser.

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='&quot;comment-&quot; +data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<aexpr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<aexpr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>
Inserindo icones dos comentários do autor

Procure pelo mesmo código anterior e insira a linha em negrito, substtuindo a url
<dt class='comment-author'expr:id='&quot;comment-&quot; +data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<aexpr:href='data:blog.homepageUrl'>
<imgsrc='http://URL_DA_IMAGEM/Imagem.png'/>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<aexpr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>
Para aprender a habilitar a caixa de comentários no blogger, leia: Formulário de comentários no blogger

Sugiro as leituras:
Personalizando a caixa de comentários do Blogger

Personalizar caixa de comentários do Blogger

3 Comentários:

Anônimo disse...

valeu vou testar

Natália disse...

Não da certo :(

Anônimo disse...

legal

Postar um comentário

Leia as regras:
Todos os comentários são lidos e publicados, se respeitados os critérios:
Para encomendas de logomarcas e outras artes, leia: Ilustrex
Não peça parceria por aqui entre em contato
Ofensas pessoais, ameaças e xingamentos não são permitidos;
Seu comentário precisa ter relação com o assunto do post;
Não inclua links desnecessários no conteúdo do seu comentário;

  ©Template by Pelo Estilo and Dicas Blogger - Contato - Termos de Uso

TOPO