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
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:
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:
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.
Procure pelo mesmo código anterior e insira a linha em negrito, substtuindo a url
Sugiro as leituras:
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'>Destacando os comentários do autor
<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>
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'>Inclua as partes que está em negrito
<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>
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 {Mude a cor e o plano de fundo como quiser.
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}
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'>Inserindo icones dos comentários do autor
<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>
Procure pelo mesmo código anterior e insira a linha em negrito, substtuindo a url
<dt class='comment-author'expr:id='"comment-" +data:comment.id'>Para aprender a habilitar a caixa de comentários no blogger, leia: Formulário de comentários no blogger
<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>
Sugiro as leituras:
Leia mais...
