Browse By

Comentários enumerados no Blogger

Com esse tutorial você irá aprender a numerar os comentários do seu blog (aqui esta função está implementada à muito tempo). Essa funcionalidade existe no WordPress por padrão, mas também pode ser implementada aqui no Blogger.

Como sempre, recomendo fazer o backup do template do seu blog, porque se ocorrer algum problema, você poderá restaurar o modelo.
Instruções:
Entre no Painel de Controle do Blogger, clique em Layout -> Editar HTML, clique na caixinha Expandir Modelos de Widgets e procure por este código no seu template: <dl id=’comments-block’>
E abaixo desse código adicione:

<script type=’text/javascript’>var contadorComentarios=0;</script>

PS: Se não achar o código <dl id=’comments-block’>, tente <dl expr:class=’data:post.avatarIndentClass’ id=’comments-block’>

Faça a mesma coisa com esse código: <b:loop values=’data:post.comments’ var=’comment’> e abaixo dessa linha adicione:

<div class=” expr:id=’data:comment.id’>

Agora você terá que encontrar o seguinte código: <data:commentPostedByMsg/>
Após essa linha adicione:

<span class=’comentacontador’>
<a expr:href='”#comment-” + data:comment.id’ title=’Link para esse comentário’>
<script type=’text/javascript’>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>
</a>
</span>

Para terminar essa etapa da instalação, procure pela última tag </dd> e após ela adicione o seguinte trecho:

<script type=’text/javascript’>
ContarC(‘<data:comment.id/>’)
</script>
</div>

O Código deverá ficar assim:

</dd>
<script type=’text/javascript’>
ContarC(&#39;<data:comment.id/>&#39;)
</script>
</div>
</b:loop>
</dl>

Agora adicione o código abaixo antes da tag </head>:

<style type=’text/css’>
.comentacontador {
float: right;
display: block;
width: 50px;
margin-top: -25px;
padding: 5px 0 0;
text-align: right;
font-family: ‘Century Gothic’,’Lucida Grande’,Arial,Helvetica,Sans-Serif;
font-size: 36px;
font-weight: normal;
}

.comentacontador a:link, .comentacontador a:visited {color: #456 !important;}
.comentacontador a:hover, .comentacontador a:active {color: #728200 !important;}

.comentarioPar {
margin: 5px 0;
padding: 5px 10px 0;
background-color: #ececec;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
}

.comentarioImpar {
margin: 5px 0;
padding: 5px 10px 0;
background-color: #e1e1e1;
border-bottom: 1px solid #dadada;
border-top: 1px solid #dadada;
}
</style>

<script type=’text/javascript’>
function ContarC(cual) {
var resto;
resto = contadorComentarios % 2;
if (resto == 0)
document.getElementById(cual).className=’comentarioPar’
else
document.getElementById(cual).className=’comentarioImpar’
}
</script>

Os códigos das cores em laranja, deve ser personalizado de acordo com o seu blog, ele está personalizado de acordo com a caixa de comentários do meu blog. Então, mão na massa!

Demonstração:

Comentários enumerados no Blogger
Sair da versão mobile