segunda-feira, 4 de julho de 2011

Numerando comentários no blogger

Uma forma bem legal de deixar seus comentários mais interativos e profissionais é numerando seus comentários. Uso esse método pra tentar deixar meus comentários um pouco diferente, saindo um pouco fora do padrão blogger.

image

Então que tal você colocar no seu blog também?

Vamos lá!

Faça o login no blogger;

Vá em ‘Design’ – ‘Elementos da página’ e marque a opção ‘Expandir modelos de widgets’;

Você apenas vai procurar pelos trechos de códigos mostrados abaixo e acrescentar as partes destacadas.

<b:includable id='comments' var='post'>

......………………………………..

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>
<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/>
<span class='numberingcomments'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
</dt>
<dd class='comment-body'>
.....………………………………..
</dd>
</div>
</b:loop>
</dl>

Agora vamos aplicar ao contador.

Ainda no editar HTML procure por:

]]></b:skin>

E cole o seguinte código CSS acima dela:

.numberingcomments{ 
float: right;
display: block;
width: 50px;
margin-top: -35px;
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
text-align: center;
margin-right: 40px; 

.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;} 
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}

Depois salve e veja como ficou! ;D

Este tutorial eu vi no Blog Brasil Acadêmico

Marcadores: , ,

2 Comentários:

Às 6 de julho de 2011 20:07 , Blogger bleach disse...

oi

 
Às 10 de agosto de 2011 15:34 , Blogger Lidi disse...

No meu não dá certo =(

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial