Tutorial - Comentários Numerados

 

Yoo!

Desculpem por não ter postado muito hoje, não preciso explicar o motivo. Nessa última unidade - e com certeza na recuperação - eu irei me ausentar um pouco, espero que compreendam.

Desta vez trouxe um tutorial do Mundo Blogger, é o mesmo tutorial que usei para numerar os comentários do blog. Acho que já notaram essa pequena numeração. É bem fácil de fazer, mas eu só acho útil para quem faz sorteios pelo número do comentário.

Espero que gostem ~

1. Vá até Design > Editar HTML e procure por ]]></b:skin>. Acima da tag, cole:

/* contador comentarios

------------------------- */

.comments .comments-content {

counter-reset: contadorcomentarios;

overflow: hidden;

position: relative;

width: 100%;

}

.comments .comment-block:before {

color: #C0C0C0; /*--- cor da fonte da numeração do comentario--- */

content: counter(contadorcomentarios, decimal);

counter-increment: contadorcomentarios;

font-family: Helvetica;   /*--tipo da fonte--*/

font-size: 20px; /*--tamanho da fonte--*/

font-weight:bold;

position: absolute;

right:2px;

top: 5px;

}

O código já está explicado nas abinhas ali, não precisa de mais informações. (O tutorial termina aqui para quem não usa o mesmo modelo de comentários que o do blog.)

Se por acaso você usou o tutorial de personalizar comentários iguais aos meus, vai precisar fazer a seguinte modificação: 

1. Lá mesmo em Editar HTML, procure por:

.comments .comments-content .icon.blog-author{

background-repeat: no-repeat;

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);

width:18px;

height:18px;

display:inline-block;

margin:0 0 -4px 6px;

float:right;

}

2. Troque esse trecho pelo seguinte código:

.comments .comments-content .icon.blog-author{

background-repeat: no-repeat;

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);

padding: 0  0 0px 2px;

}

Prontinho! Agora é só salvar.