Image Map

Como colocar número de páginas no blogger!

Olá, pessoal!

Vi hoje dar uma dica para incrementar o seu blog!
Quando uma pessoa vem encomendar um layout comigo é muito comum que ela peça que coloque o número de páginas no lugar de "Página Inicial", "Posts Antigos" e "Posts Recentes".

Para colocar no seu blog, é só copiar o código abaixo e colar em um gadget HTML/Javascript. Daí vc desloca esse gadget para deixá-lo abaixo da área onde ficam os posts!

<center><style type="text/css">
#blog-pager{font-size: 18px;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:18px; margin:10px;}
.showpageArea a{color:#000; border-radius: 0px; border:0px solid #000; background:#57a5fd;}
.showpageNum a{padding:3px 8px;margin:0 2px; border-radius: 0px; text-decoration:none;border:0px solid #000; background:#57a5fd; color:#000;}
.showpageNum a:hover{border-radius: 0px; border:0px solid #000; background:#57a5fd;}
.showpageOf{color: #000; border-radius: 0px; margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:0px solid #000;}
.showpageOf a{color: #000; border-radius: 0px; margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:0px solid #000;}
.showpagePoint{border-radius: 0px; color:#000; padding:3px 8px;margin:2px;border:0px solid #000; background:#57a5fd; text-decoration:none;}
.showpagePoint a{border-radius: 0px; color:#000; padding:3px 8px;margin:2px;border:0px solid #000; background:#57a5fd; text-decoration:none;}
</style></center>
<script style='text/javascript'>
var numshowpage=7;
var postperpage =2;
var upPageWord="Anterior";
var downPageWord="Próxima";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://static.tumblr.com/uoel5vg/qkmnblwxb/paginacionbloggermtb.js'></script>


Onde estiver em VERDE: Vc pode mudar a cor da paginação! Aqui, vc pode ver o códigos das cores!
Onde estiver em AZUL: vc pode mudar a cor da letra!
Onde estiver em VERMELHO: Vc pode mudar o tamanho da letra!

Ele fica assim, ó:




Você também pode mexer no border-radius para colocar as pontas arrendondadas e na border para adicionar uma borda colorida!

qqr dúvida, pode deixar nos comentários!


Bjão,

Juliana.




25 comentários:

  1. Muito boa dica sim..gostei ..quero fazer isso no meu!! beijosss

    ResponderExcluir
  2. Que gracinha vc compartilhar essa dica! Acho digno! Vou colocar no meu agooooooora! :*

    ResponderExcluir
  3. Eu consegui colocar, e fica a numeração para as páginas do blogger, mas acontece que eu tenho algumas postagens que tem muitos comentários, mais de 400, e pra exibir todos, tem que ficar clicando em "carregar mais". Eu queria saber se dá pra por esse tipo de numeração para a página de comentários também.

    ResponderExcluir
  4. Gostei, este é o mais simples que achei em todo google. kkk; valeu, bom topico

    ResponderExcluir
  5. Ajudou muito, obrigada mas, coomo que faz pra mudar a cor das letras que indicam a página ao ser clicada?

    ResponderExcluir
    Respostas
    1. Vai no painei do blogger> Modelo>Personalizar>Avançado> e procura lá que tem :)

      Excluir
  6. excelente postagem, ajudou bastante!!!
    www.viajanaofirma.blogspot.com.br

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

    ResponderExcluir
  8. Oi, eu coloquei no meu, só que quando mudo de página ela repete a última postagem.

    Pode me ajudar?

    http://ansiedadefeminina.blogspot.com.br/

    ResponderExcluir
  9. Obrigada pelo tutorial, ajudou muito! :D
    http://paratudoamiga.blogspot.com.br/

    ResponderExcluir
  10. Me ajudou muito *-* obrigada :D
    http://books-and-resenhas.blogspot.com.br/

    ResponderExcluir
  11. Você usa o blogger?
    Se usa como conseguiu o .com.br no link?
    Beijos
    Adorei a postagem!

    ResponderExcluir
  12. Ajudou muito mesmo. Obrigada!
    http://permita-se7.blogspot.com.br/
    beijo!

    ResponderExcluir
  13. Foi o melhor que encontrei até agora sem complicação.

    ResponderExcluir
  14. aaaaaah!! muito obrigada! tava me matando de procurar e vc foi minha salvação rsrs ;) ♥

    ResponderExcluir
  15. no meu blog nao funcionou ficou tipo uma foto,voce clica em cima e nao vai!

    ResponderExcluir
  16. A única coisa que mudou foi que o "postagens mais antigas, inicio e tal' ficou em negrito =(

    ResponderExcluir
  17. Obrigada, tentei vários códigos que indicaram em sites e blogs e nenhum estava dando certo, com o seu funcionou direitinho. Vlw !! Bjs

    ResponderExcluir

Related Posts with Thumbnails