aprenda como é feito: "Paginação Numerada para Blog"
Autor: Edilene brandao da silva | Publicado: 2016-08-29T16:08:00-07:00



Aqui neste espaço...&nbsp;

 Apenas divulgo e indico...&nbsp;

Posts, notícias, dicas etc. 




Com devidas fontes&nbsp; e créditos&nbsp;deste presente post:&nbsp;ferramentasblog





..." para ajudar você a customizar seu template no&nbsp;Blogger,&nbsp;

....agora,&nbsp;

 mudando os links de navegação de página&nbsp;

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 percorra suas páginas uma por uma, passando pelo  conteúdo que deseja."




 ..."o modelo "..."mostrar é como ilustra a imagem."
   



"Paginação Numerada para Blog"
 

 "... já mostramos outras formas de mudar o link de navegação das páginas"...
 

"Personalizar Links de Navegação do Blogger"
 

 ..." 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 "...

 ..."abaixo ...

..." 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:



]]&gt;&lt;/b:skin&gt;






2. Imediatamente ACIMA dela cole o seguinte código no&nbsp; 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;}



 

..." Não altere nada aí e agora procure por &lt;/body&gt; que estará bem no final do código-fonte. Também, imediatamente ACIMA dele, cole o trecho que segue:





 

&lt;!-- Inicio do codigo de navegacao --&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;&lt;script type='text/javascript'&gt;var pageCount=5;var displayPageNum=5;var upPageWord =&amp;#39;Anterior&amp;#39;;var downPageWord =&amp;#39;Próximo&amp;#39;;&lt;/script&gt;&lt;script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/&gt;&lt;/b:if&gt;&lt;!-- Final do codigo de navegacao --&gt;



 

"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."




 "...Salve e veja o resultado em seu blog."






OBS.:



Ao invez&nbsp; do&nbsp; do código indicado no

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item 2 (dois) , citado acima, 


se preferir,&nbsp;

pode-se usar o código a seguir:


/* PageNav
--------------------------- */
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;&nbsp; }

.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;
} 

.:.