12 de nov de 2012

Paginação numerada

Hooy , hoje trouxe um tutorial , eu quase não posto mais tutoriais por aqui acho que tenho que começar a postar mais , já que o nome do blog é Tutorials and Tips , então eu acho que os tutoriais estão ficando um pouco de lado né?! Hoje trouxe um tutorial que eu usei nos dois últimos Templates que é a paginação numerada ela substitui aqueles links Home , Recentes e Antigos avá
Let's see?


Esse tutorial eu aprendi lá no CB que agora está de cara nova muito lindo a Liah tem mesmo um bom gosto né?! 

Vá no html do seu blog e procure a tag </body> acima dessa tag cole o seguinte código.
<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord=&quot;Anterior&quot;;var downPageWord=&quot;Próxima&quot;;</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>
Agora vamos definir o css da paginação.
Procure por ]]></b:skin> e acima dessa tag cole o seguinte código.

/* PageNav --------------------------- */
.showpageArea {
font-family:Verdana, Geneva, sans-serif;
color: #000;
font-size:11px;
 margin:10px; }
.showpageArea a { padding: 3px 8px;
 margin: 2px;
 font-weight: 700;
 text-decoration: none;
 color:#777; /* COR DA FONTE DO LINK PRÓXIMA */
 border:1px solid #ccc; /* BORDA DO LINK PRÓXIMA */
background: #eee; /* COR DE FUNDO DO LINK PRÓXIMA */ }
.showpageNum a { padding: 3px 8px;
 margin:0 4px;
 text-decoration: none;
 border:1px solid #999; /* BORDA DA NUMERAÇÃO */
background: #ddd ; /* COR DE FUNDO DA NUMERAÇÃO */ }
.showpageNum a:hover {
border:1px solid #888; /* BORDA DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */
background: #ccc; /* COR DE FUNDO DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */ }
 .showpageOf{ margin:0 8px 0 0; }
.showpagePoint {
text-decoration: none;
padding: 3px 8px;
 margin: 2px;
font-weight: 700;
border:1px solid #999; /* BORDA DA NUMERAÇÃO ATIVA */
background: #666; /* COR DE FUNDO DA NUMERAÇÃO ATIVA */
color:#fff; /* COR DA FONTE DA NUMERAÇÃO ATIVA */ }
Customize como preferir

Atenção
Se a paginação não aparecer na hora não se desespere as vezes demora um pouco para aparecer.
O numero de posts na página deverá ser de 5 a 7 posts. 
Em blog de teste fechado não aparecerá a páginação.

10 comentários:

  1. amei o tuto, e aqui sobre a afiliação, quando você colocar agente aqui avisa *-* (pra colocarmos la)
    Beijos.

    ResponderExcluir
  2. Esse tutorial é ótimo, alem de ajudar as pessoas a não se perder em um blog rsrs!

    Beijos :*
    http://pequena-julieta.blogspot.com.br/
    VISITE!

    ResponderExcluir
  3. É bem mais bonito essa de página numerada.

    ResponderExcluir
  4. hey depois da meia noite tem um selinho pra vc la no blog
    se vc nao gosta faça um visitinha assim mesmo

    radiopires.blogspot.com

    ResponderExcluir
  5. Oii, ameeei o post !!! esperoo quee tenha muito sucesso (mais) ... Bom se puder Seguir meu blog , eu agradeço, você vai ajudar minha meta, se seguir avisa lá , pra mim retribuir, a queria saber tbm , se teem como a gente se afiliar Obrigada, que respostas ! http://eternalmagicfeminine.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obg >< Desculpa mais minha elite de afiliados tá lotada.

      Excluir