• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

2 de junho de 2013

Paginação Numerada

 

Olá Chocos!

Eu sei que estou super sumida, mas está muito complicado aqui em casa, com o computador quebrado e meu tio viajou e teve que deixar o cachorro dele aqui em casa, e então é mais uma coisa para fazer. Bem, eu estava procurando um tutorial no Cherry Bomb e achei um que deixa o blog muito cute. Se você personalizar, vai ficar mais ou meno assim:



Vamos conferir o tutorial?


1. Vá no seu blog e procure por </body>. Cole acima:
<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>
2. Agora procure por ]]></b:skin> e cole acima:
/* 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 */ } 
Personalize onde está mandando. Tinha umas dicas lá no blog, o que eu acho importante colocar aqui:
  1. Essa paginação pode demorar um pouco para chegar.
  2. 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. - Essa dica foi dada pela Gizaa.
Pronto, é isso!

35 comentários:

  1. Muito bom o tutu e util tbem
    http://vanessatutoriais.blogspot.com.br/

    ResponderExcluir
  2. Fica mesmo muito fofinho *--*
    Lancei meu blog hoje, poderia dar uma passadinha lá?

    - Senhorita Coala

    ResponderExcluir
  3. Não pegou :// Eu estava doida atras desse tutorial!

    ResponderExcluir
  4. Eu acho lindinho a paginação assim :3
    E que lay hein!!! Perfeitoooo ;3
    Beijus <3

    ResponderExcluir
  5. Sempre quando uso da errado por isso curto mais as fotos mesmo em home, proxima e anterior.

    therepublicafeminina.blogspot.com.br

    ResponderExcluir
  6. Irei usar no meu proximo lay* adorei o novo layout do seu blog; Bjs
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  7. adorei o tutorial e seu layout é lindo
    seguindo
    brendaadantas.blogspot.com

    ResponderExcluir
  8. Já tentei varias vezes mas nunca da certo :c

    Beijos, Joy
    blog-acridoce.blogspot.com.br

    ResponderExcluir
  9. Ótimo tutorial, gostei !
    bem útil ^.~

    ResponderExcluir
  10. amei o blog,segindo
    segue de volta?!
    http://touch-th3-sky.blogspot.com/

    ResponderExcluir
  11. Já conhecia o tuto, fica super fofo!
    pqngarota.tk

    ResponderExcluir
  12. Eu já conhecia o tuto do CB :3 mas excelente tuto ^^-

    Kissu || Pankax&Pankadax

    ResponderExcluir
  13. Hey, é a Emily do Sorriso Met4lico >.<
    Fiz um texto só de textos e gostaria de saber se vocês poderiam me ajudar a divulgar ou com uma afiliação, não sei...
    Enfim, obrigada desde já!
    http://copyof-me.blogspot.com/

    ResponderExcluir
  14. Esse tutorial é muito legal e deixa o blog super cute !
    Beijinhos <3
    Feminises
    Enchanted

    ResponderExcluir
  15. É muito anww esse efeito *o* adoro esse tuto porém nem usa .-.

    XOXO ^^
    jovenclube(.blogspot.com.br)

    ResponderExcluir
  16. Legal, sempre quis aprender isso.
    http://morango-sabor.blogspot.com/
    Visita, por favor?

    ResponderExcluir
  17. Amei,a dica amei o blog seguindo!
    moda-pormoda.blogspot.com
    Visita,por favor?

    ResponderExcluir
    Respostas
    1. Que bom que gostou!
      Vou seguir se gostar, ok?

      Excluir
  18. Esse tutorial é muito bom mesmo ^^

    xoxo♥

    Crazy Girl ~

    ResponderExcluir
  19. muito util , usarei pra um lay fre que to fazendo :3
    QuasePrincipa||BLOG

    ResponderExcluir
  20. Muito útil esse tutorial!
    Mas posso fazer uma crítica construtiva?
    Essas letrinhas pequenininhas e brancas do seu blog, são muito cansativa aos olhos!

    ResponderExcluir
  21. Coloquei no meu blog!

    www.dudynhaoliveira.blogspot.com

    ResponderExcluir
  22. NINGUEM ENSINA DIREITO, ISTO SO FICA NA PAGINA INICIAL!
    :@

    ResponderExcluir