Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

21/02/2013

Tutorial - "Blog Pager" com números:

Gente, devo avisar que elaborei esse tutorial apenas por que não encontrei outro assunto para postar hoje. O tutorial de onde extraí o código está no My Candy Space, que por sua vez retirou-o de um outro blog, mas devo alertar (antes que alguém ache que eu plagiei) que fiz modificações no código e estou detalhando mais o tutorial, portanto, essa postagem é como se fosse uma adaptação pessoal minha. Recomendo que vocês também passem no blog que postou o código primeiro, pode ser que o código de lá esteja mais adequado ao seu blog.
Para exemplificar o que faremos no tuto de hoje, veja só uma imagem do código funcionando aqui mesmo no DSM:

Anterior e proxima com números

E depois da página 6 ele passa a ficar assim:

Anterior e proxima com números

Não se preocupe, não cresce mais do que isso... Hehehe... Bem interessante, não? Estou usando em todos os blogs aqui do DSM... Vamos ao passo-a-passo?

Antes de tudo, guarde uma cópia do seu template original para o caso de algo dar errado!!!

Navegação de páginas com números:

Se você já configurou imagens para os links "Anterior", "Próxima" e "Home", recomendo que você não retire essas imagens. No caso do código falhar ou da pessoa parar de carregar seu blog antes dele estar completamente aberto, o Blogger mostrará a configuração antiga. Sem contar que nas páginas estáticas essa navegação com números não é exibida. Portanto, não retire nada do código atual, ok?
Para começar, no seu Painel, entre em Modelo > HTML (botão branco abaixo do seu template atual). Clique em qualquer parte do seu HTML, depois aperte Ctrl+ F no seu teclado, cole na caixinha que abriu (Search) o seguinte trecho: </body> e aperte a tecla "Enter".


Acima do trecho que ficou em destaque, 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>

O número que eu destaquei em vermelho equivale ao número de postagens por página. Aumente ele caso seu blog tenha mais postagens por página, ou o diminua, caso tenha menos.
Agora procure por ]]></b:skin> 
Cole logo acima este código:

  .showpageArea {
    font-family: Arial Black;
    color: #000;
    font-size:14px;
    margin-top: 30px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}
  
.showpageArea a {
     padding: 3px 8px;
     margin: 0 3px;
     font-weight: 700;
     text-decoration: none;
     color: #777; /* Cor da fonte dos botões próxima e anterior */
     border: 1px solid #ccc; /* Borda dos botões próxima e anterior */
    background: #eee; /* Fundo dos botões próxima e anterior */
}

    .showpageNum a {
    padding: 3px 8px;
     margin: 0 3px;
     text-decoration: none;
     border: 1px solid #999; /* Borda dos números */
    background: #ddd; /* Fundo dos números */
}

    .showpageNum a:hover {
    border: 1px solid #888; /* Borda dos números com o cursor em cima */
    background: #ccc; /* Fundo dos números com o cursor em cima */ }
 
    .showpagePoint {
    text-decoration: none;
    padding: 3px 8px;
     margin: 0 3px;
    font-weight: 700;
    border: 1px solid #999; /* Borda do número ativo */
    background: #666; /* Fundo do número ativo */
    color: #fff; /* Cor da fonte do número ativo */
}

.showpageOf {
    display: none;
    height: 0px;
}

Os trechos em negrito são os que podem ser modificados de acordo com o seu template.
Agora clique em "Visualizar" e confira se as cores estão certas. Pode ser que o código não funcione na mesma hora (acredito que seja por causa do número de páginas. Se não aparecer nada, salve o template mesmo assim, daqui a pouco vai aparecer.

Por último, clique em " Salvar Modelo ". Pronto!

Espero que o tuto tenha sido útil, amanhã teremos "Capas para Twitter", não percam!!!

Mil Sweetkisses,
8 Comentários
Comentários

8 comentários:

  1. Já fiquei um tempão tentando fazer isso no meu blog. Agora acho que nem quero mais essa personalização. Mas se quiser mudar vou vir aqui. Bjus!!!

    galerafashion.blogspot.com.br

    ResponderExcluir
  2. eu sou doida pra colocar isso no meu blog, vou ver se faço

    ResponderExcluir
  3. Ta rolando um mega sorteio lá no blog até dia 03/03: http://www.junhiimce.com/2013/02/2-anos-de-blog-sorteio.html
    Beijos, www.junhiimce.com Se quiser seguir, sigo de volta.

    ResponderExcluir
  4. TENHO QUE DIZER ... EU TE AMOOOOO KKKK
    FAZ UM TEMPÃO QUE ESTOU TENTANDO COLOCAR PAGER NO MEU BLOG E NENHUM TUTORIAL EU ENTENDIA , MAS ESTE FOI PERFEITO E SUPER FACIL... AMEI
    DA UMA OLHADINHA PRA VER COMO FICOU PERFECT!
    http://meusromances140288.blogspot.com.br/

    BJUS E MUITO OBRIGADA!

    ResponderExcluir
  5. Massa!

    Tô tentando mudar a parte de baixo que tem o "anterior, home e próxima" querendo achar algo que combine com o lay do Reticências... Vamos ver se acho rsrs

    www.reticenciando.com

    Milhões de beijos pra vc Sheila.

    ResponderExcluir
  6. Mais um que eu AMEI rs. Tá virando hábito, culpa sua que faz tutorial do que eu estou passando um tempão procurando rs

    Meu blog vai fazer 1 ano mês que vem e to querendo fazer uma mudanças no layout dele, to achando aqui uma porção de coisa que vou poder usar por lá. Essa das páginas, por exemplo :)

    Valeu compartilhar

    ResponderExcluir
  7. Acabei de colocar no meu blog e funcionou na hora!

    ResponderExcluir
  8. Amei o Tuto, Gostaraia de saber se tem como mudar a configuração pra não ficar quadradinhos e sim em circulos.
    obrigada.

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados