Numerar paginas do blog

1º Passo - Adicionar o arquivo JavaScript no seu template.




Vá até Layout >> Editar HTML , não precisa marcar "Expandir modelos de widgets" e procure pela tag:

</body>



e ACIMA dela cole o seguinte código:



texto planoprint?

1 <script style="text/javascript">



2 var pageCount=5;var displayPageNum=5;var upPageWord="Voltar";var downPageWord="Próxima";</script>



3 <script style="text/javascript" src="http://dl.dropbox.com/u/3173073/HacksBlogger/page-nav.js">



4 </script>





Existem alguns parâmetros personalizáveis neste código.

var pageCount=5; -> número de postagens que irá aparecer em cada pagina. Altere a numeração, se preferir.





2º Passo - Corrigir o template:



Vá até Layout >> Editar HTML , marque "Expandir modelos de widgets" e procure cada ocorrência de :



texto planoprint?

1 'data:label.url'



incluindo as aspas, e substitua todas por:



texto planoprint?

1 'data:label.url + "?&max-results=5"'



Aqui 5 é o número de posts a serem exibidos por página.







3º Passo - Aplicar os estilos CSS:



Vou disponibilizar aqui 3 modelos para você escolher. Escolha um, e se quiser, você pode editar as cores da maneira que preferir de acordo com o layout do seu blog.





Modelo 1







Se você quiser o modelo da figura acima, copie todo o código abaixo e cole-o ANTES da tag ]]></b:skin>



texto planoprint?

01 /* PageNav



02 --------------------------- */



03 .showpageArea a {



04 text-decoration:underline;



05 }



06 .showpageNum a {



07 text-decoration:none;



08 border: 1px solid #cccccc; /* edite a cor da borda se quiser*/



09 margin:0 3px;



10 padding:3px;



11 }



12 .showpageNum a:hover {



13 border: 1px solid #cccccc; /* edite a cor da borda */



14 background-color:#cccccc; /* edite a cor de fundo se quiser*/



15 }



16 .showpagePoint {



17 color:#333; /* edite a cor da fonte */



18 text-decoration:none;



19 border: 1px solid #cccccc; /* edite a cor da borda se quiser*/



20 background: #cccccc; /* edite a cor de fundo se quiser*/



21 margin:0 3px;



22 padding:3px;}



23 .showpageOf {



24 text-decoration:none;



25 padding:3px;



26 margin: 0 3px 0 0;}



27 .showpage a {



28 text-decoration:none;



29 border: 1px solid #cccccc; /* edite a cor da borda se quiser*/



30 padding:3px;}



31 .showpage a:hover {



32 text-decoration:none;



33 }



34 .showpageNum a:link,.showpage a:link {



35 text-decoration:none;



36 color:#333333; /* edite a cor da fonte */



37 }









Modelo 2



texto planoprint?

01 /* PageNav



02 --------------------------- */



03 .showpageArea {



04 font-family:verdana,arial,helvetica;



05 color: #000;



06 font-size:11px;



07 margin:10px; }



08 .showpageArea a {



09 color: #fff;



10 }



11 .showpageNum a {



12 padding: 3px 4px;



13 margin:0 4px;



14 text-decoration: none;



15 border-top:2px solid #000;



16 border-left:1px solid #000;



17 border-right:1px solid #000;



18 border-bottom:1px solid #000;



19 background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -25px repeat-x; }



20 .showpageNum a:hover {



21 border-top:2px solid #999;



22 border-left:1px solid #999;



23 border-right:1px solid #999;



24 border-bottom:1px solid #999;



25 background: #999 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -50px repeat-x;



26 }



27 .showpagePoint {



28 color:#fff;



29 padding: 3px 8px;



30 margin: 2px;



31 font-weight: 700;



32 border-top:2px solid #000;



33 border-left:1px solid #000;



34 border-right:1px solid #000;



35 border-bottom:1px solid #000;



36 background: #000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 0 repeat-x;



37 text-decoration: none;



38 }



39 .showpageOf{ margin:0 8px 0 0;



40 }







Modelo 3



texto planoprint?

01 /* PageNav



02 --------------------------- */



03 .showpageArea {



04 font-family:verdana,arial,helvetica;



05 color: #000;



06 font-size:11px;



07 margin:10px; }



08 .showpageArea a {



09 color: #000;



10 text-shadow:0 1px 2px #fff;



11 font-weight: 700;



12 }



13 .showpageNum a {



14 padding: 3px 8px;



15 margin:0 4px;



16 text-decoration: none;



17 border:1px solid #999;



18 -webkit-border-radius:3px;-moz-border-radius:3px;



19 background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;



20 }



21 .showpageNum a:hover {



22 border:1px solid #888;



23 background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;



24 }



25 .showpageOf{



26 margin:0 8px 0 0;



27 }



28 .showpagePoint {



29 color:#fff;



30 text-shadow:0 1px 2px #333;



31 padding: 3px 8px;



32 margin: 2px;



33 font-weight: 700;



34 -webkit-border-radius:3px;-moz-border-radius:3px;



35 border:1px solid #999;



36 background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;



37 text-decoration: none;



38 }





Agora é só salvar e pronto! Já está tudo instalado!

Confira DEMO.