Paginação numerada - Nova -

|
Tumblr_lxtnma0oqe1qkscwbo1_500_large_large

Há muito tempo atrás (rs) eu postei aqui no blog um tutorial de paginação numerada, só que ele não funciona muito bem em alguns blogs, então resolvi postar um novo tutorial com o código que estou usando atualmente aqui no CB, como vocês podem ver na imagem abaixo:


Para colocar no seu blog uma paginação assim, é só seguir estes simples passos:

Vá no HTML do seu blog, procure pela tag </body> (Aperte Ctrl+F e digite para facilitar a busca)
Cole acima do trecho pesquisado, 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 procure por ]]></b:skin>  e cole logo acima, este 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 FOONTE DA NUMERAÇÃO ATIVA */ } 
Se não aparecer na hora, não se desespere, as vezes demora um pouco para aparecer no blog. Dentro de alguns dias aparece. A querida Gizaa deu algumas dicas por comentário e achei que seria útil colocar aqui também: Uma coisa que deve ser levada em conta é se os feeds do blog estão certos, as vezes tem algum erro e ai nada funciona, nem posts relacionados,nem paginação e todos widgets que usam jason. Ah e em blog de testes fechado também não funciona. E também o numero de posts por página (configurado no painel) deve ser o mesmo no script -nesse caso é 5-

Feito isso, agora é só personalizar em todas as partes que tem instruções. Para ficar mais bonitinho você pode colocar sombra, e outras coisas. Não esqueça de sempre fazer backup do seu blog antes de começar algum tutorial! Se usar este tutorial, credite o Cherry Bomb e o Super Dicas PFS.
Espero que tenham gostado, kissus!

112 comentários

  1. Muito bom! Fica show no lay *w*
    # www.cute-bii.blogspot.com

    ResponderExcluir
    Respostas
    1. Não deu aqui, vamos aguardar um pouco mais

      Excluir
  2. Ah, me lembro que usei esse tutorial mas não resolveu mesmo, talvez eu faça esse *0*

    Beijos
    www.garotadeallstar.com

    ResponderExcluir
  3. Legal! E nem é tão complicado assim, né?
    Gostei, beijos...
    Batom De Framboesa

    ResponderExcluir
  4. Ameei o tuto, como eu estava louca por ele ^^, com toda a certeza no próximo lay usarei, claro, sempre com os devidos créditos . Kissus !

    #Nhaaac >>>http://the-lovers-official.blogspot.com/

    ResponderExcluir
  5. muuito boa e útil essas dicas ! :D
    então , posso pedir um favor ? :3
    o blog D A Y S A G O mudou de nome e URL , mas ainda da pra acessar pelo contos-da-lua.blogspot.com e ser redirecionado !
    Poderia me ajudar a divulgar ?
    lá ta cheeio de novidades , look's do dia , manotas e emoções , haha'
    conto com você lá ein ? <õ/
    beeijos e fique com Deus :*
    - P H O R A do O A R -
    http://phora-do-ar.blogspot.com.br/

    ResponderExcluir
  6. OMG, eu ia te pedir hoje mesmo pra você postar esse tuto, até porque o antigo é muito difícil de personalizar. LIAH, tu é demais, até ler mentes você le -q
    -----------
    Te indiquei em um memê super legal (:
    Veja: http://yanmgomes.blogspot.com.br/

    ResponderExcluir
  7. Liah, obrigada!
    Ajudou muuito, sério, eu já ia pedir!

    ResponderExcluir
  8. Amei <3
    Irei usar e darei os créditos, ok?
    -------------------------------------------
    blue---light.blogspot.com

    ResponderExcluir
  9. Muito interessante esse tutorial,depois vou usar ele no meu blog,estou fazendo layout novo!
    #http://sweetmagia.blogspot.com

    ResponderExcluir
  10. Adorei o tutorial Liah! Vou usar no meu próximo layout!

    ResponderExcluir
  11. Muito legal! Talvez eu use no meu blog :)

    Beijos
    http://www.teenage-party.blogspot.com.br/

    ResponderExcluir
  12. AMEI! Acho que no próximo layout do blog vou colocar paginação numerada. Ah, e falando nisso, seu blog ficou incrível, não sei como você consegue!E gostaria de agradecer por ter mantido o Tic Tac Girls nos afiliados ^^

    Kisses
    Luh

    http://tictacgirls.blogspot.com.br/

    ResponderExcluir
  13. *O* sempre adorei as paginas numeradas, ainda mais assim, mas acho que não combina com o meu blog :/

    http://omeubrilhantemundo.blogspot.com.br/

    ResponderExcluir
  14. Tudo que vc ensina eu fasso no meu blog, más nada dá certo nunca, nenhuma das coisas que vc incinou deu certo

    http://morangocomchantliy.blogspot.com.br/

    ResponderExcluir
  15. Adorei Liah, muito obrigada! Poderiam visitar meu blog? Beijos, se puder sigam :)
    www.mundo-leticia.blogspot.com

    ResponderExcluir
  16. Annjo, eu fiz um template free e ñ sei como colocar para download no blog, vc pode me explicar ? Obbg desde já ! Rafaela :D

    ResponderExcluir
  17. Oiiiii girl! Amei o tutu e usei ! bj !

    ResponderExcluir
  18. Tuto show - deixa o lay muito lindo, talvez eu use no próximo ; com os devidos créditos sempre =)

    http://queridaborrecencia.blogspot.com.br/

    ResponderExcluir
  19. Euu amo visitar o blog da Liah! Coisaa mais liinda o Cherry Bomb!
    Estou usando creditos do CB no meu blog pelos tutoriais que me ajudaram a montar meu novo layout!
    sweetmagia.blogspot.com

    ResponderExcluir
  20. Fica muito lindo, talvez eu use u-u
    Ei Liah, como você botou aquele player no gadget Welcome? Me ensina? ;3

    thefashionwonderland.blogspot.com

    ResponderExcluir
  21. Ai, fica lindo, né? Super melhor. Vou usar no blog e creditar <3 Obrigada pela visita, lindona.

    Beijos,
    Anna
    http://garota-queen.blogspot.com/

    ResponderExcluir
  22. Eu já estou usando e ficou muito lindo! O único tutorial que deu certo no meu blog. Quer ver como ficou?

    http://nataliamedice.blogspot.com.br/

    ResponderExcluir
  23. Fica lindo personalizada, mas neste layout não irei usar porque já personalizei a navegação de páginas. Um beijão.

    http://world-cutest.blogspot.com/

    ResponderExcluir
  24. O resultado fica muito bonito, acho que vale a pena esperar alguns dias até aparecer no blog, não é? Pra ser bem sinceramente, eu prefiro a navegação mais tradicional mesmo, com Início, Postagem mais recente e mais antiga, mas as páginas numeradas podem ser uma bela saída em alguns layouts mais despojados. Adorei o tutorial, acho que vou usar uma hora dessas! Um beijo.
    the-zombie-attack.blogspot.com

    ResponderExcluir
  25. Nossa que lindo que fica *o* amei muuuuito ! talvez eu use, se usar, coloco os seus créditos lá, ><

    beijos :*
    http://siteiloveit.blogspot.com/

    ResponderExcluir
  26. Tem que colocar códigos o nome da cor? Ex: roxo ou #912CEE

    ResponderExcluir
  27. Esse código das paginas numeradas é de lua rs, em algns blogs dá certo noutros não...

    Uma coisa que deve ser levada em conta é se os feeds do blog estao certos, as vezes tem algum erro e ai nada funciona, nem posts relacionados,nem paginação e todos widgets que usam jason

    ah e em blog de testes fechado também não funciona rs

    e também o numero de posts por página (configurado no painel) deve ser o mesmo no script



    bjãoo

    ResponderExcluir
  28. Amei *-*
    Com certeza vou usar!

    Beijinhos ;*
    beatriz-officiels.blogspot.com.br

    ResponderExcluir
  29. Ótimo tuto,fica show!
    http://jessica-alves15.blogspot.com.br/

    ResponderExcluir
  30. A-M-E-I !
    aa aquele seu tutorial de por o slide no cabeçalho não funcionou no meu, tive que achar outro na web.. mais consegui kk' da uma olhadinha la se você puder! layout novo la! bjs
    Mundo of Teen

    ResponderExcluir
  31. Que lindo Liah... estou pensando em usar em meu blog ♥'
    beijos :*
    http://sweet-wordeland.blogspot.com/

    ResponderExcluir
  32. Ai que show, Liah acabei de fazer isso no meu blog, vou visualizar pra ver se deu certo. Obrigada!

    Beijos♥

    carismaticaoficial.blogspot.com

    ResponderExcluir
  33. fofis liah!
    -->http://smileretro.blogspot.com.br/

    ResponderExcluir
  34. Nossa, parece que leu meu pensamento, hein? Andei hoje a manhã inteira procurando esse tutorial e agora acabei achando ele aqui!

    O outro que você postou não funcionou em meu blog...

    Bjs!
    http://sorvete--de--morango.blogspot.com/

    ResponderExcluir
  35. O blog fica incrível com esse efeito, vale até apena ficar dias esperando para aparecer! Talvez eu uso!

    http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  36. É lindo esse efeito,e eu já coloquei no meu outro blog.Beijão

    revolutionstartshere-oficial.blogspot.com.br

    ResponderExcluir
  37. Caramba! Fazia muito tempo que eu estava procurando esse Tutorial, certa vez eu achei, mas o site era todo em Inglês ¬¬ Daí não consegui prosseguir sabe? Eu acabei de trocar o Layout do Blog, mas pode ter certeza que no próximo eu irei usar *-*
    Beijão Liah :)
    http://blog-part-of-me.blogspot.com/

    ResponderExcluir
  38. Oi....Lia um blog copiou todo seu layout...http://cherry-lili.blogspot.com.br/

    Plágio....coisa errada....Quem fez isso foi uma colega minha chamada Livia Machado

    http://cherebebel.blogspot.com.br/
    em nome do meu blog Cherebebel

    ResponderExcluir
  39. Adorei o tutorial, já estou usando lá no meu blog! Coloquei os créditos lá em baixo onde fica escrito tecnologia do blogger :)

    http://querido-livro.blogspot.com.br/

    ResponderExcluir
  40. oii liah, estes dias eu achei um blog que esta te plagiando: http://kawaiitheworld.blogspot.com.br/2012/07/brushes-meninas.html
    ela copiou uma de suas postagens. Espero ter ajudado. Bjinhos
    http://thewoag.blogspot.com

    ResponderExcluir
  41. Adorei fica bem legal mesmo além do mais voce explica direitinho.
    http://www.jipeblo.com

    ResponderExcluir
  42. Adorei,até usei no meu blog,e ficou show.
    Beijooos

    http://ourworldscrazy.blogspot.com.br/

    ResponderExcluir
  43. aah! legal, vou tentar!

    blog-foradecontrole.blogspot.com

    ResponderExcluir
  44. Liah , me ajude !!! eu sempre teclo Ctrl + f e apere um negócio em vermelho : 0 de 0 e é por isso que não não faço nada no meu blog que seje de encontrar tag . Me ajuda ? Responda no meu blog : http://mariana-meninasnamoda.blogspot.com.br/ e segue ele por favor !!!

    ResponderExcluir
  45. Liindo esse tutorial,ameei (:
    beeeijos;*
    http://sooulteen.blogspot.com.br/

    ResponderExcluir
  46. Super útil o tutorial!

    http://waverlyplaceblogger.blogspot.com.br/2012/08/sorteio-de-um-layout-personalizado.html

    ResponderExcluir
  47. Está acontecendo um mega concurso entre os blogs: HTML Teen e Princesa Imperfeita! Vai ficar de fora?

    http://htmlteen.blogspot.com.br/2012/08/concurso.html

    ResponderExcluir
  48. adoooorei a dica, vou usar agora!

    http://bfashionstar.blogspot.com.br/

    ResponderExcluir
  49. ah Liah!!
    Não precisa agradecer, é um enorme prazer ajudar :)

    bjooooooo

    ResponderExcluir
  50. Oih"" Achei Lindo seu blog,e já to participando vc pode participar do meu tbm?http://blogingridpink.blogspot.com.br/

    Obg ''Deus'' de Já!

    ResponderExcluir
  51. Acho que a terceira vez que comento nesse post kk amo esse blog entro sempre sempre sempre, pelo menos 5 vezes ao dia.Queria pedir pra vc um tutorial de como fazer um gadget de status como o seu!
    com aquele Online,Comentarios e etc!Bjs
    http://bangteen.blogspot.com.br/

    ResponderExcluir
  52. Peerfeito como sempre !Parabéns Cherry !
    Retribui? http://teamtutopedia.blogspot.com.br/

    ResponderExcluir
  53. Nossa o meu blog é de mONSTER High,ficou muiitoo fofo qnd eu alterei a cor dele obrigado!

    ResponderExcluir
  54. Ameeeeeei esse tuto *-----*
    http://worldofimaginatioon.blogspot.com.br/

    ResponderExcluir
  55. Amei esse tutu *o*

    http://mundootakuotome.blogspot.com.br/

    ResponderExcluir
  56. Amei !
    Mais eu não consegui colocar , mais deixa , no seu blog ficou demais !
    meupalaciocorderosa.blogspot.com.br

    ResponderExcluir
  57. Gostei do tutorial, consegui fazer,obrigado.

    ResponderExcluir
  58. Oque é errado denuncio21 de outubro de 2012 às 20:26

    Oi fofa !
    O blog cherebebel a plagiou.
    Muito errado falou de uma tau menina e fez o mesmo.
    Denunciei,ele reformou tudo...
    www.cherebebel.blogspot.com
    denunciei pq achei errado valw !

    ResponderExcluir
  59. Muito obrigado!! Muito útil!!
    http://humilhando.blogspot.com.br/

    ResponderExcluir
  60. Obrigado pelo ótimo tuto Liah, eu vou usar no novo Lay que estou fazendo, beijos ;)
    wehearthtml.blogspot.com

    ResponderExcluir
  61. Usei em um layout que estava fazendo, e realmente fica muito lindo!
    Super útil!
    Beeijos
    http://unhaseesmaltesdicas.blogspot.com.br

    ResponderExcluir
  62. O meu não ficou bonito que nem o do exemplo. Ele ficou com os numeros juntos, e sem fundo nem nada, mas já é alguma coisa :(

    ResponderExcluir
  63. Liah ,obrigada por disponibilizar esse tutorial pois foi o unico que funcionou no meu blog.Não se preocupe,o nome de seu blog está na page de creditos. Valeu. ^^
    http://ottakunosekaii.blogspot.com.br/

    ResponderExcluir
  64. Liah, o tuto deu certo pela metade. Fiz tudo bonitinho e apareceu na mesma hora no blog. O único problema é a segunda postagem do blog sumiu. É um blog de testes, aberto. Tem 4 posts. Aparecem o mais atual e os dois mais antigos, o que deveria estar na página 2 some e aparece a página 4 vazia. O que posso fazer? Bjoooo

    ResponderExcluir
  65. Perfeito, funcionou na hora e está em uso no blog. Show de bola.

    ResponderExcluir
  66. Aprende muito com teu blog pra poder fazer o layout do meu, rs dá uma olhada e espero que goste http://diiariodeumadiva.blogspot.com.br/

    ResponderExcluir
  67. Obrigada pelo tutorial, Liah. Meu blog ficou uma maravilha! Você sabe como se faz para pôr um top comentaristas no blog?
    Agradecida!

    ResponderExcluir
  68. Obrigada pelo tutorial!!! Perfeito, como sempre :)

    Bjoss

    ResponderExcluir
  69. Amei, fazia muito tempo que estava atras deste tutorial.
    Se puder divulga => http://alucihnadablog.blogspot.com.br/ .
    Beijos!

    ResponderExcluir
  70. O meu não tinha ficado com o 'outro' tutorial. Mais com esse ficou! Ameei! :)

    ResponderExcluir
  71. Nossa, muito bom messssmo! Amei seu blog! O meu apareceu na hora, suas dicas estão me ajudando bastante!

    ResponderExcluir
  72. Funcionou na hora!Adorei!Os tutoriais do Cherry Bomb São da Hora!
    Beijinhos!

    ResponderExcluir
  73. Oii, eu mudei o modelo do meu blog, antes eu usava o modelo 'Celestial' em meu blog, mas eu resolvi mudar totalmente o layout e modelo dele, e estou usando no momento o modelo 'Espetacular Ltda.'.
    Antes quando eu usava o modelo celestial, esse código de página numerada dava certinho, só que agora no modelo novo, esse código não pega.
    Ele aparece a numeração das páginas, só que não dá pra personalizar.
    Queria saber qual foi o meu erro.

    http://michaelahelena.blogspot.com

    ResponderExcluir
  74. Como colocar a sombra?! Sou crua em html, você pode me passar o código? Agradeço! ;* http://paisagemdejanela.blogspot.com

    ResponderExcluir
  75. Obrigada me ajudou muito, mas como mudar as cores? pq o meu ficou cinza...
    a-ultima-moda.blogspot.com.br

    ResponderExcluir
  76. Seu blog é IN-CRI-VEL. Estou arrumando o meu com todas as dicas que você sugere. Parabens pelo trabalho.

    bjk'z

    ResponderExcluir
  77. O código funciona. Porém a paginação numérica aparece em tons de cinza, quando, na verdade, eu coloquei os códigos dos mesmos tons que a imagem da paginação que você colou no post (rosa, branco e roxo). O que faço para que fique igual a imagem se as cores não funcionam?

    ResponderExcluir
  78. Own muito obrigada sua linda =D

    Parabens pelo blog

    http://garotailustre-baabi.blogspot.com.br/

    ResponderExcluir
  79. Adorei Liah! Sempre acompanho seu blog e você além de ter um blog muito fofo, você explica direitinho pra gente.

    Valeu!

    Julianayra.blogspot.com

    ResponderExcluir
  80. Ai tem tanta coisa linda aqui nesse blog que eu queria fazer no meu.....
    Colocar a "paginação numerada", slide no cabeçalho....mas eu não consigo. Eu tento fazer esses passos q vc ensina, mas não consigo. Sou tão leiga nesses assuntos...argh que raiva...hahaha
    Beijoos

    ResponderExcluir
  81. Nossa Super fácil, Adorei!
    Deu certinho em meu blog

    www.paraousar.com

    ResponderExcluir
  82. Usei e agora não consigo tirar.
    Alguem pode me ajudar?
    http://sotestejenny.blogspot.com.br/
    jennifer_snt@hotmail.com

    ResponderExcluir
  83. Gostei, só não vou usar porque eu não preciso ...
    Beijos!
    Joaneta-Chan

    ResponderExcluir
  84. meu anjo vlw aqui deu certo vlw abraços ,é para meu novo blog
    http://baixarclipsgratis.blogspot.com.br/

    o antigo ja tinha mais passa la

    http://wwwshowfilmes.blogspot.com.br/

    ResponderExcluir
  85. eu simplesmente ameeeeeeeeeeei! Parabéns! http://sonhosdedirectionersfanaticas.blogspot.com.br/

    ResponderExcluir
  86. Este comentário foi removido pelo autor.

    ResponderExcluir
  87. Olá, Cris & Cris, de Tudo Um Pouco agradece sua ajuda.
    Tentei varios outros tutorais e nenhum funcionou. Este funcionou no mesmo momento.
    Lindo site.
    Muito obrigado.

    ResponderExcluir
  88. Adorei, Obrigada :) Ficou ótimo no blog :D

    http://imagines1ddiariodeumafa.blogspot.com.br/

    ResponderExcluir
  89. Este comentário foi removido pelo autor.

    ResponderExcluir
  90. Muito bomm...Adoreiiii!! Valew por compartilhar seus conhecimentos com a gente!

    ResponderExcluir
  91. aaawn , amei , plea primeira vez eu consegui fazer *u*
    obg <33

    ResponderExcluir
  92. Adorei,queria mesmo fazer isso e deu super certo,como faço pra creditar vocês?
    Beijo

    brilhoestilo.blogspot.com.br

    ResponderExcluir
  93. Sempre queria fazer isso no meu blog mas não sabia agora graças a voces vou fazer.
    obg.

    ResponderExcluir
  94. Otimo post! Já implementei no meu blog de tirinhas.
    http://www.tiranicas.com.br/

    ResponderExcluir
  95. Muito bom! Coloquei no meu blog de mensagens e textos reflexivos.
    http://textosreflexivosemensagens.blogspot.com.br

    ResponderExcluir
  96. Nossa,muito lindo divou!
    http://euamomoda2014.blogspot.com.br/

    ResponderExcluir
  97. Excelente, esta de parabéns mesmo!! Fiquei uma semana tentando tudo o que era dica, e o seu foi o único que funcionou, eu recomento, obrigado!

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...