Numerar Páginas do Blogger

Faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.
Como o tutorial é um pouco grande, para ver clique em Ler Tutorial Completo... logo a baixo.


1° Passo - Adicionar o Arquivo JavaScript no seu template.
Download - Clique Aqui
Hospede o Arquivo em seu Própio site de Hospedagem. (DropBox, Webs, 100MB Hosting, Picasa Web, etc.)

2° - Vá até a aba design >> Editar HTML , não precisa marcar "Expandir modelos de widgets" e procure pela tag: </body>
 <script style="text/javascript">  
 var pageCount=5;var displayPageNum=5;var upPageWord="Voltar";var downPageWord="Próxima";</script>  
 <script style="text/javascript" src="URL-JAVASCRIPT-PAGE-NAV">  
 </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.

3° - Vá até Layout >> Editar HTML , marque "Expandir modelos de widgets" e procure cada ocorrência de:
 'data:label.url'  

incluindo aspas, substitua tudo por:
 'data:label.url + &quot;?&amp;max-results=5&quot;'  

4°- Aplicar os Estilos CSS
Modelo:

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


 /* PageNav  
 --------------------------- */  
 .showpageArea {  
 font-family:verdana,arial,helvetica;  
 color: #000;  
 font-size:11px;  
 margin:10px; }  
 .showpageArea a {  
 color: #000;  
 text-shadow:0 1px 2px #fff;  
 font-weight: 700;  
 }  
 .showpageNum a {  
 padding: 3px 8px;  
 margin:0 4px;  
 text-decoration: none;  
 border:1px solid #999;  
 -webkit-border-radius:3px;-moz-border-radius:3px;  
 background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;  
 }  
 .showpageNum a:hover {  
 border:1px solid #888;  
 background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;  
 }  
 .showpageOf{  
 margin:0 8px 0 0;  
 }  
 .showpagePoint {  
 color:#fff;  
 text-shadow:0 1px 2px #333;  
 padding: 3px 8px;  
 margin: 2px;  
 font-weight: 700;  
 -webkit-border-radius:3px;-moz-border-radius:3px;  
 border:1px solid #999;  
 background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;  
 text-decoration: none;  
 }  

Agora é só salvar e pronto.

0 comentários:

Postar um comentário

Cuidado ao Comentar...
Pois seu IP estará guardado em nosso site. (IpGuard)
Seu Comentário só é Postado depois de vizualizarmos...

BlogBlogs Creative Commons License Technology Blogs