Link de navegação numerado para Blogger
Mais um artigo para ajudar você a customizar seu template no Blogger, agora mudando os links de navegação de página padrões do Blogger, numerando cada página. Tudo o que você puder fazer para facilitar a navegabilidade de seu blog é importante e uma dessas formas e permitir que o visitante percorras suas páginas uma por uma, passando pelo conteúdo que deseja. E o modelo que vou mostrar é como ilustra a imagem.
Já ensinei um modelo aqui bem parecido com esse, mas muita gente teve dificuldades e ele apresenta mesmo um pequeno problema para blogs que publicam mais de 1 artigo por dia, mas se quiser testar também, o resultado é praticamente o mesmo:
Bem como já mostramos outras formas de mudar o link de navegação das páginas:
Vale lembrar também que, antes de fazer qualquer modificação em seu blog principal, teste em um blog preparado para isso e faça um backup completo do seu blog original para não passar sustos e poder reverter as mudanças caso algo não saia como desejado.
Inserindo paginação numerada no Blogger.
O modelo que vou mostrar abaixo eu encontrei no blog Blogger Widgets (em inglês). Veja o artigo original caso tenha alguma dúvida: Numbered Page Navigation For Blogger.
Proceda da seguinte forma:
1. Abra o painel do Blogger em sua conta e clique no menu “Layout” ~> “Editar HTML”. No código fonte de seu blog procure pela seguinte linha:
]]></b:skin>
2. Imediatamente ACIMA dela cole o seguinte trecho de CSS (que determina as caracteríticas dos elementos que serão usados):
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
} 4. Não altere nada aí e agora procure por </body> que estará bem no final do código-fonte. Também, imediatamente ACIMA dele, cole o trecho que segue:
<!-- Inicio do codigo de navegacao -->
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Anterior';
var downPageWord ='Próximo';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!-- Final do codigo de navegacao --> Repare que o número na linha marcada de vermelho determina quantos artigos serão exibidos por página, então coloque o número adequado para o padrão do seu blog (já tratamos sobre a quantidade de artigos por página aqui: Quantidade e tamanho das Postagens na primeira página).
Já o número na linha rosa é a quantidade de números que aparecerá nos links de navegação. Escolha a quantidade de acordo com a estética e largura da área de postagem.
5. Salve e veja o resultado em seu blog.
Quer ver outras formas de melhorar o layout de seu blog? Então leia também:
Nenhum comentário:
Postar um comentário