Feliz 2014!

sexta-feira, 25 de janeiro de 2013

aviso+selo+comentarios com Numeração


                                             Yoo
meus amores    recebi um novo selo   o aviso  e que acho que vou postar mais vlogs esse ano e que so volto a postar dia 4  de fevereiro vlogs    recebemos o selo do blog siners Crazzy

                                     
Vamos ao tutorial  como colocar numeração nos comments

Este tutorial mexe com vários códigos, então recomendo que antes de começar você faça download do modelo de seu blog, assim se houver algum erro, dá pra restaurar tudo como era antes. Fez backup? Então vamos começar!


ATENÇÃO
O script só funciona em comentários configurados para abrir em janela pop-up ou em página inteira ou se não usarem o sistema de respostas do próprio blogger.

Abra seu HTML, e marque a caixinha "Expandir Modelos de Widgets"
Aperte Ctrl+F e procure por:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
 Abaixo dessa linha cole isso:

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

 Agora procure por esta linha:
<b:loop values='data:post.comments' var='comment'>
 E logo abaixo dela cole esse código:
<div class='' expr:id='data:comment.id'>

 Novamente, procure por:
<data:commentPostedByMsg/>
E logo abaixo cole isso:
<span class='comentacontador'><a expr:href='"#comment-" + data:comment.id' title='Link para este comentário'><script type='text/javascript'>            contadorComentarios=contadorComentarios+1;            document.write(contadorComentarios)</script></a></span>
 Por último procure por:

 <b:include data='comment' name='commentDeleteIcon'/></span></dd>
 E logo abaixo cole: </div>

No final seu código deve estar assim:
 <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<script type='text/javascript'>var contadorComentarios=0;</script>          <b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'><data:comment.authorAvatarImage/>
              </b:if>
              <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='comentacontador'><a expr:href='&quot;#comment-&quot; + data:comment.id' title='Link para este comentário'><script type='text/javascript'>contadorComentarios=contadorComentarios+1;            document.write(contadorComentarios)</script></a></span>            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
           </div>          </b:loop>
 Visualize se não tem nenhum erro e salve as alterações. Agora vamos aplicar os estilos á numeração. Nesta etapa você vai ter que salvar as alterações e depois visualizar no blog mesmo, já que não dá pra ver os comentários na  pré-visualização.

Aperte Ctrl+F e procure por ]]></b:skin>
Logo acima da tag cole o seguinte código:

.comentacontador {float: right;  /* alinhamento do número*/display: block;width: 50px; /*Largura do espaço do número*/margin-top: -30px;  /* distância dos números ao topo */text-align: right;font-family: Trebuchet MS; /* Fonte do múmero*/font-size: 36px;  /* tamanho da fonte */background: #uijvj; /*Coloque cor de fundo se quiser*/font-weight: normal; /*Troque normal por bold se quiser a fonte em negrito*/}
creditos:RSH 
tchau bjs

Nenhum comentário:

Postar um comentário