Uma amostra do Trabalho.
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;
}
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;
}
3. 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:
<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="https://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js" type="text/javascript"> </b:if> <!-- Final do codigo de navegacao -->
<script type="text/javascript"> var pageCount=5; var displayPageNum=5; var upPageWord ='Anterior'; var downPageWord ='Próximo'; </script>
<script src="https://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.
4. Salve e veja o resultado.
Pow.. mas dá erro!
ResponderExcluirTipo, quando eu to na pagina 1 e clico na página 2.. ele come um monte de post. Mesmo estando dentro do "marcador"... naum aparece todos os posts.
O código fonte bugou, devido as atualizações do blogger, mas acho que posso até consertar esse bug.
Excluir