Páginas Numeradas no Blogger com 8 Estilos CSS para Você Escolher

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Em 2009 publiquei um artigo que ensinava a colocar paginação no blogger. Sempre achei este hack um pouco difícil e às vezes ele dava uns erros.

Pretendo ensinar 2 novos hacks de páginas numeradas no blogger aqui no TPV

Este que vou ensinar agora é muito mais fácil e simples que o de 2009 e tem a opção de colocar estilos diferentes para a páginas numeradas. → Junto com este hack teremos também 8 estilos CSS das páginas numeradas para você escolher.

Numerar as páginas do seu blog é um recurso muito útil, porque facilita a navegação em seu blog. (Usabilidade)
Veja algumas Vantagens das Páginas Numeradas que listei no post de 2009 e que não podiam faltar aqui:
» O leitor pode navegar nas páginas de posts do seu blog e voltar quando quiser naquela que o chamou a atenção;
» Melhor organização do seu blog;
» Design simples e bonito sem ocupar muito espaço.

Uma diferença que este hack tem em relação ao próximo artigo de páginas numeradas é que este tem a opção do link da última (last) e primeira (first) página, enquanto o outro não possui esta opção.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Como colocar Páginas Numeradas no Blogger

1- Encontre a Linha:

2- Cole este código antes da linha acima:

//
var pageNaviConf = { perPage: 5<\/span>, numPages: 5<\/span>, firstText: "First<\/span>", lastText: "Last<\/span>", nextText: "»<\/span>", prevText: "«<\/span>"<\/b> } //

Configure o código acima da forma que quiser:

»perPage: 5, → Significa quantos posts serão exibidos por página de navegação.
►Deve ser igual ao número de postagens na página principal que você configurou quando criou seu blog.
Confira em Configurações » Postagens e comentários » Mostrar no máximo X postagens na página principal.» Clique em Salvar configurações
»numPages: 5, →São quantos números de páginas serão exibidos na página de navegação.
»firstText: "First", →Altere First, se quiser, por Primeira página;
»lastText: "Last", →Altere Last, se quiser, por Última página;
»nextText: "»", →» Corresponde ao símbolo » você pode alterá-lo por outro símbolo;
»prevText: "«" →« Corresponde ao símbolo « você pode alterá-lo por outro símbolo.

Para ajudar »Leia:Símbolos - Atalhos do Teclado

3- Agora encontre a Linha:

4- Selecione a linha acima▲ e Substitua esta linha por este código abaixo ▼:

♦ Clique em Salvar modelo.

Observação Importante:

Assim você aplicar este hack acesse um post.
Se no final do seu post os links para (Previous Post ou Postagem mais Recente), (Next Post ou Postagem mais Antiga) e (Home ou Início) estiverem nesta ordem respectivamente.
A solução que encontrei para que o link (Início ou Home) fique no meio, entre os links (Previous) e (Next post) foi esta:

Encontre a linha:
»Expanda este bloco de códigos. (clique em ► no canto esquerdo do seu editor de HTML
Nele encontre a linha:
Se esta linha estiver entre uma condicional b:if como exemplifiquei abaixo copie as 3 linhas e mude de lugar.