Pages

Personalizando a caixa de comentários do Blogger

ChatPassei algumas horas do domingão cuidando do template do Dicas Blogger e foi muito bom! Desde que customizei o Blogger Tips tomei gosto por mexer em html e prometo que em breve trarei um post sobre este assunto.
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:
comentarios
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='&quot;comment-&quot; + 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='&quot;comment-&quot; + 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:
comments
Neste exemplo vemos os 03 hacks já aplicados.
Divertido não?
Lembrem-se sempre de fazer um backup do template antes de utilizar estas dicas!

Um comentário:

amaal khodir disse...

http://www.fnur.bu.edu.eg/
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/422-2013-12-10-10-18-01
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/421-2013-12-10-09-48-39
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/419-2013-12-09-07-21-12
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/420-2013-12-10-09-48-38
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/417-2013
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/418-2013-12-09-07-17-28
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/415-2013-12-03-08-09-23
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/416-2013-12-03-08-25-21
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/413-2013-11-21-07-50-21
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/414-2013-11-25-09-38-30
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/411-2013-11-20-08-11-53
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/412-2014
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/409-2013-2014
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/410-2013-11-13-17-25-28
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/407-2013-11-09-08-51-15
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/408-2013-11-13-11-55-53
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/405-2013-11-09-08-42-05
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/406-2013-11-09-08-46-10
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/403-2013-11-09-08-25-45
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/404-2013-11-09-08-28-15
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/400-2013-11-09-07-50-13
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/401-2013-11-09-08-03-31
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/398-2013-11-09-07-29-40
www.fnur.bu.edu.eg/fnur/index.php/main-news/item/399-2013-11-09-07-43-49
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/397-eugen-ionesco
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/402-2014-2013

Postar um comentário

 
Copyright (c) 2010 - 2011. Blogger templates Desde: 22/12/10
Editado Por : Gabriel Pereira