PS.: MELHOR VISTO NO GOOGLE CHROME

26 agosto 2013

Paginação Numerada - 2013




Oi gente, estou disposto a mudar de vez o blog. E para começar irei ensinar hoje a como personalizar o "Blog Pager". Aquele local onde fica Postagens mais Antigas, Inicio e Postagens mais recentes.
No lugar, cairia bem uma navegação personalizada como está:






1. Em seu HTML do blog,  procure pela tag  </body> , a cima dela cole o código a baixo:

<script style='text/javascript'> var pageCount=3;var displayPageNum=3;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 3 destacado em vermelho você terá de substituir o 3 pelo número de postagens que aparece na página inicial do seu blog.
Para concluir, procure pela tag ]]></b:skin> e a cima dela cole:


}/* 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:#000; /* COR DA FONTE DO LINK PRÓXIMA */
 border:1px solid #33CCFF ; /* BORDA DO LINK PRÓXIMA */
background: #fffff; /* COR DE FUNDO DO LINK PRÓXIMA */ }
.showpageNum a { padding: 3px 8px;
 margin:0 4px;
 text-decoration: none;
 border:1px solid #CC99FF; /* BORDA DA NUMERAÇÃO */
background: #ffffff ; /* COR DE FUNDO DA NUMERAÇÃO */ }
.showpageNum a:hover {
border:1px solid #33CC00 ; /* BORDA DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */
background: #ffffff; /* 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 #FF0099; /* BORDA DA NUMERAÇÃO ATIVA */
background: #fffff; /* COR DE FUNDO DA NUMERAÇÃO ATIVA */
color:#000000; /* COR DA FONTE DA NUMERAÇÃO ATIVA */ }

As explicações do que é cada coisa estão no próprio código, você só precisa ler com atenção e alterar. Tabela de cores aqui.

Muito obrigado e espero ter ajudado. ((:

Nenhum comentário:

Postar um comentário