20/01/2015

12. Maratona CSS: Paginação numerada no blogger ¹ (5 modelos)

||

Boa tarde queridos, como estão? Eh, as coisas vão caminhando já me sinto um pouco melhor em relação a perda do meu amigo peludo. E concordei coma ideia de uma leitora de fazer um joguinho aqui no blog, até para animar um pouco o que acham? Pessoal quero pedir que deixem os links de seus blogs nos comentários, estou querendo fazer visitas, tudo bem? Hoje trago um tutorial bem antigo, mas difícil de funcionar...eu encontrei um que funcionou fiz algumas modificações.

Mas os créditos se encontram no final da postagem. Eu fiz o teste nos layouts padrões do blog é descobri o segredo para funcionar, vou contar! É só colocar ele primeiro, antes de qualquer outro código. Simples, não? O tutorial segue abaixo arrumei 5 modelinhos para vocês, espero que gostem. 


1. Procure por:
<b:includable id='mobile-index-post' var='post'>

acima dele cole esse código:
<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'> var pageNaviConf =
{
perPage: 5,
numPages: 8,
firstText: &quot;Primeira&quot;,
lastText: &quot;Última&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script src='https://sites.google.com/site/drwtexte/l/paginacaonumerada.js' type='text/javascript'/> <div class='clear'/>
</div>
</b:includable>

O número 5 marcado em vermelho no código acima é o número de posts que aparece por página. Esse número deve ser o mesmo número que está configurado na aba Layout do blog, caso esteja diferente alguns posts do seu blog vão se perder entre as "passadas" da página. (Fazendo algumas não aparecerem ao passar).

2. Agora pesquise por:
<b:include name='nextprev'/>

substitua por:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

3. Agora procure por  ]]></b:skin> e acima dele cole o código do modelo escolhido, então salve!


Modelo 1

.pagenavi .pages {display: none;}
#blog-pager, .pagenavi {padding: 8px 10px;
clear: both;
text-align: center;
margin: 32px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: #f1f1ee;
margin: 2px;
background: #c8d3d4;
background-position: bottom;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
border-radius: 10px;
font-size: 18px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: #d4dedf;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;}
.pagenavi .current {
background: #d4dedf;
}


Modelo 2


.pagenavi .pages {display: none;}
#blog-pager, .pagenavi {padding: 8px 10px;
clear: both;
text-align: center;
margin: 32px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: #835b51;
margin: 2px;
background: #c1ada8;
background-position: bottom;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
font-size: 18px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: #cbb9b5;
-moz-border-radius: 10px 25px / 25px 10px;
border-radius: 10px 25px / 25px 10px;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;}
.pagenavi .current {
color: #c1ada8;
background: #8f6a61;
}


Modelo 3


.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #fff;
background-color: #96d2ea;
padding: 5px 10px;
border: 1px solid #6eb6d3;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #2da5d5;
background:#96d2ea;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #2da5d5;
background-color: #96d2ea;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #b794c7;
background-color: #dfc6ea;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}


Modelo 4


.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #fff;
border: 1px solid #d3d5db;
background: #e0e0e0; /* Old browsers */
background: -moz-linear-gradient(top, #e0e0e0 0%, #e0e0e0 49%, #e0e0e0 49%, #e0e0e0 51%, #e9eaed 51%, #e9eaed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(49%,#e0e0e0), color-stop(49%,#e0e0e0), color-stop(51%,#e0e0e0), color-stop(51%,#e9eaed), color-stop(100%,#e9eaed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0e0e0 0%,#e0e0e0 49%,#e0e0e0 49%,#e0e0e0 51%,#e9eaed 51%,#e9eaed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0e0e0 0%,#e0e0e0 49%,#e0e0e0 49%,#e0e0e0 51%,#e9eaed 51%,#e9eaed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0e0e0 0%,#e0e0e0 49%,#e0e0e0 49%,#e0e0e0 51%,#e9eaed 51%,#e9eaed 100%); /* IE10+ */
background: linear-gradient(to bottom, #e0e0e0 0%,#e0e0e0 49%,#e0e0e0 49%,#e0e0e0 51%,#e9eaed 51%,#e9eaed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#e9eaed',GradientType=0 ); /* IE6-9 */
padding: 5px 10px;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #d3d5db;
background:#e9eaed;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #e0e0e0;
background-color: #e9eaed;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #e0e0e0;
background-color: #e9eaed;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}


Modelo 5


.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #000;
background-color: #eabca0;
padding: 8px 12px;
border: 1px solid #eba77d;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 4px 4px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #eba77d;
background:#fff;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #eba77d;
background:#fff;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #a0a0a0;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}


OBS: O código foi testado no modelo simples e janela (travel). Ele funcionou no layout virgem, sem edições. Então se for utilizar coloque ele primeiro antes de qualquer outro código. 

Não deu certo?

O código só funciona em blog públicos, se estiver fechado apenas para autores ou leitores não vai aparecer. Outro motivo de talvez não aparecer seja a numeração da postagem, no primeiro código esta programado para aparecer 5, mas coloque de acordo com a quantidade da configuração do seu blog, se está diferente não vai aparecer.

Pode ocorrer de aparecer depois de algumas horas. Para ajudar limpe o cache do navegador.

Créditos: Dicas para você & Follow Your Dreams.
OBS: Desculpe os erros gramaticais, estou postando pelo celular... mais tarde eu corrijo.

38 comentários:

  1. adorei o tutorial, eu vou aplicar ao meu blog.
    estou iniciando e estou muito confiante!!
    este é o meu blog > http://pearl-saeng.blogspot.com.br/
    beijos!!

    ResponderExcluir
  2. Lindos e bem úteis, já sei da próxima vez e_e'

    Naka Pyon! | 中ピョン! [clique e visite]

    ResponderExcluir
  3. Eu estava procurando a um tempo *-*
    Amei esse segundo modelo! ♥

    ResponderExcluir
  4. Apliquei ao meu blog o azulzinho, gostei muito <3
    Obrigada!!
    Meu blog: http://pearl-saeng.blogspot.com.br/

    ResponderExcluir
  5. Oi, estou bem e você?
    Eu sinto muito pela perda :( eu sei como é, forças pra ti
    Eu adoro esse tuto e realmente é raro algum dá certo, seguirei tua diga e ameei os modelinhos, ficaram muito fofo.

    Beijos ❤
    http://www.p-perfectsthings.com/ | Quietly Pink

    ResponderExcluir
  6. É muito difícil lidar com a perda dos nossos amiguinhos, mas com o tempo a gente fica melhor ;^;

    Ainda existe essa coisa de joguinhos? Mds, faz muito tempo que não vejo isso! *0*

    Salvou minha vida esse tutorial! Eu uso paginação numerada no meu blog e agradeci muito por salvar meus códigos em arquivos de texto, se não eu tava perdida ;^;Só que minha paginação funciona quando quer, então acho que vou testar essa, obrigada por compartilhar! :3

    Beijos,
    Blonde Chaos

    ResponderExcluir
  7. Mal conheço seu blog ! se você puder ver meu blog e seguir ele ( se gostar claro) eu ficaria muito feliz ♥

    thelifeofalittledreamer.blogspot.com.br

    ResponderExcluir
  8. Adorei o tuto, mas aqui vai uma dúvida: Se o numero d posts em vez d estar um determinado número por postagens na página inicial, se estiver por X posts por dia, como eu tenho que configurar?

    [Naka Pyon!] - Visite!

    ResponderExcluir
  9. amei o tutoria, eu estava mesmo a procura de um tutorial desse xd
    Com carinho, Hina || Aishiteru em Contos ||

    ResponderExcluir
  10. Anônimo22/1/15

    Wendy, pelo amor de deus, ensina a colocar Shimeji com Follow? Igual a esse loirinho... http://w-chanteste5.blogspot.com.br/
    Obri

    ResponderExcluir
  11. Aah eu sempre achei esse tutorial de numeração complicado já tentei uma vez e deu bugue he he he ... mas eu amei os modelinhos são muito fofos!


    http://animesjaychan.blogspot.com.br/

    ResponderExcluir
  12. Ameeeeeeei o tutorial, os modelos são completamente perfeitos

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  13. Que modelos lindos! Amei o segundo, ficou muito fofinho <3 jksjks Não vou usar agora, mas pretendo usar depois! *-* Beijos

    - LG

    ResponderExcluir
  14. Celular?Serio?Como vc guenta?
    Kkkkkkk.....ja tentei esse tutorial de outro blog e nao deu certo,muito obrigada por nos avisar como dar um jeito nesse erro...kkkkk

    Gostei da postagem anterior sobre bligs iniciantes,no caso o meu eh e ao mesmo tempo nao eh iniciante kkkk...na vdd voltei a deixa-lo ativo,mas o problema eh q meus leitores sumiram entao estou tendo que divulgar de novo meu blog..kkkk...mas as dicas ainda estao me ajudando hue :v


    Queria aproveitar e pedir afiliaçao, tem vaguinhas pra mim?

    gweender.blogspot.com ~Yoko Shopping


    Seu blog eh lindinho ♥ ja estive aqui outras vezes,mas nunca comentei nada hue :v

    ResponderExcluir
  15. Oii Wendy, tudo bem? Estou procurando parcerias para um bloguinho que acabei de criar.
    E queria saber se tem vagas para afiliado? Se não tiver entenderei ^-^
    obg

    ResponderExcluir
  16. Amei os modelos, talvez no meu próximo layout eu coloque o 2 ou o 4, foram os meus favoritos!

    clouds ☁

    ResponderExcluir
  17. Eu gostei bastante do seu tutorial e creio que usarei o primeiro modelo, pois o achei bem bonito. Mas posso mudar a cor? Bem, até já :)

    m-yung.blogspot.com ♡

    ResponderExcluir
  18. Acho que irei usar em um novo layout :3
    Adorei o tutorial, bem fácil!Beijos <3


    http://blog-crazycake.blogspot.com.br/

    ResponderExcluir
  19. adorei os modelos acho que vou usar no novo layout que eu fiz para o meu blog.

    Wendy queria lhe avisar que o Kawaii Things está abandonado e eu nao irei mais atualizar ele, então estou avisando para retirar a afiliação com o KT :) obg por ser nosso afiliado.

    Estou com um novo blog agora http://like-acat.blogspot.com/ poderia se afiliar? se aceitar responda lá no L-ac? obg *---*

    ResponderExcluir
  20. Ainda não testei, mas vou tentar. Muito bonito o seu blog! Visita o meu, ele é novo: http://garotadescobreomundo.blogspot.com.br/
    ~Bella <3

    ResponderExcluir
  21. Yo Wendy♥
    Eu usaria o primeiro modelo, mas prefiro os links de navegações em vez de páginas numeradas. Também nunca me acostumei em personalizar elas pois sempre ocorre algum erro inesperado que acaba estragando alguma parte do Layout ou fazendo que outro Css não funcione corretamente. Mas, em fim é a vida </3

    YuukaMori.blogspot.com || Boa Tarde♥

    ResponderExcluir
  22. Amei , achei bem legal. Um dia usarei em meu blog.

    ResponderExcluir
  23. gostei muito do ultimo , Wendy que você se fortaleça com a perda de seu amigo , e sim pode fazer um jogo :) WHB

    ResponderExcluir
  24. OOOi <3
    Cara, você é um anjo! Não sabes o quanto eu procurei por um tutorial desses que funcionasse, foi para os meus favoritos e vou usar no próximo layout. Quanto ao jogo, adoro jogos, ótima ideia <3

    xoxo || Larý Space

    ResponderExcluir
  25. Não é ruim postar pelo celular ? O.o hahaha amei o 4 modelo , beijão ♥
    http://supporthtml.blogspot.com.br/

    ResponderExcluir
  26. adorei o tuto *3* sera bem útil fdsfsd :3
    beijos | Heart of moon

    ResponderExcluir
  27. Olá! ^^

    Eu fiz uma tag no meu blog, se chama 8 coisas e queria recomendá-la pra você, caso você queira ver, o link é esse: Tag: 8 coisas

    Kissus, ^3^ | http://reviravoltateen.blogspot.com/

    ResponderExcluir
  28. Gostei dos estilos mas gostaria de saber se tem como inserir apenas setas ao inves de pagina numerada..Eu queria que aparecesse somente setas de proximo e anterior ..Tem como?

    ResponderExcluir
  29. Perfeito! Finalmente um codigo que realmente dá certo.

    ResponderExcluir
  30. Coloquei no meu e deu certo ate certo ponto, quando eu vou ate a ultima pagina não aparece todas as minhas postagens tenho mais de 800 postagens e só aparece 13 coloquei corretamente a numeração, no meu blog a numeração esta configurada para 10 postagens.

    ResponderExcluir
    Respostas
    1. Olá talvez seja o modelo do layout... vou disponibilizar uma versão funciona melhor nos novos modelos

      Excluir
  31. Olá Wendy ^^
    Tenho uma pergunta, que parece besta, mas só por desencargo de consciência, eu gostaria de saber se esse tutorial pega no modelo antigo do blog??
    Obrigada o/

    ResponderExcluir
    Respostas
    1. Eu não testei, mas ele dá muito certo no modelo simples que é o mais mais similar ao antigo então acredito que funciona sim

      Excluir
  32. Todas as coisas daqui funcionam :) Obrigado.

    ResponderExcluir
    Respostas
    1. Eu que agradeço. Obrigada! ^^

      Excluir