Paginação Numerada para Blog

Há o modelo convencional para navegar pelas páginas do Blog que consiste em três links, no final da página, onde o visitante pode passar para a próxima, voltar ou ir para a “Home”. Já mostramos aqui com substituir o texto por imagens. Algumas pessoas viram as modificações nesta função na nossa página, onde numeramos as páginas, e nos perguntam como fazer isso. Veja abaixo, como criar um sistema de paginação para o seu blog.

 

ATUALIZAÇÃO: Há uma nova versão que funciona melhor no Blogger e sem erros:

 


Você pode ver isso funcionando na página principal do [ Ferramentas Blog ] e passar, página por página, numeradas, vendo todos os nossos artigos e saber quantas páginas temos. Então, vou mostrar como inserir este recurso em seu blog também. Esta é uma dica muito complexa e grande, exigindo atenção e cuidado, mas é fácil de fazer e dá um aspecto mais profissional para seu blog.

Siga as etapas dessa dica com muito cuidado e atenção e, antes de fazer qualquer modificação e começar, faça um backup do modelo de seu blog para pode restaurar o original caso algo saia errado ou não goste do resultado.

Paginação Ferramentas Blog

Instalando os códigos.

Vamos em “Layout” e “Editar HTML” no painel do seu blog. Não marque “Expandir modelos de widgets” – não precisa marcar essa opção para fazermos as modificações que seguem e ficará mais fácil de encontrar as linhas dos códigos indicados.

A primeira parte é inserir o código CSS na parte chamada de “Style”. Ela fica acima da linha “]]></b:skin>”. Encontre essa tag e, antes dela, cole o código que segue:

<!-- Paginação Estilo início -->

.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #ccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #ccc;background-color:#ccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #ccc;background: #ccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #ccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333;}

<!-- Paginação Estilo final -->

Feito isso , agora procure por algo como:

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>

</b:section>

E, abaixo disso, cole o JavaScript que instala a função e a executa. Como o código é muito longo, para ver ele, clique em “Abrir Código”:

As partes indicadas em vermelho determinam, nessa ordem, a quantidade de artigos que aparecerá por página e, o segundo, a quantidade de números na lista.

Agora, salve o modelo e veja o resultado. Se algo sair errado, é só encontrar as marcações e apagar o que foi inserido. Teste de todas as maneiras para ter certeza de que o resultado é como deseja. Não sei como modificar mais detalhes no layout desse estilo de paginação. Vimos o modelo acima descrito e, tal como usamos, no Blogger Buster – se quiser mais detalhes, visite (está em inglês).

Ebook Blogar - O Processo de Criação de blogs, Compre agora por apenas 14,90

Website | Twitter | Facebook
Marcos Lemos é professor e blogueiro. Formado em Teologia pela PUC-MG, graduando em Letras (Português/Inglês) pela FUNEDI/UEMG. Criador do [ Ferramentas Blog ] e tem se destacado como metablogger.
Marcos Lemos já escreveu 1261 posts no Ferramentas Blog.

52 comentários

  1. Raquel Amaral disse:

    muito bom esse tutorial testei e aprovei…

  2. funcionou! muito obg *-*

Faça um comentário

Siga o Ferramentas Blog no Twitter e ganhe um E-Book 40 Dias Para Salvar Seu Blog