aprenda como é feito: "Paginação Numerada para Blog" | #blogdicasblogueiros ...bdb... blog dicas blogueiros

aprenda como é feito: "Paginação Numerada para Blog"


...fonte e créditos deste presente post:
ferramentasblog

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

..."o modelo "..."mostrar é como ilustra a imagem."
numbered-page-navigation-for-blogger


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

]]></b:skin>

2. Imediatamente ACIMA dela cole o seguinte código no  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 </body>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  do  do código indicado no
          item 2 (dois) , citado acima,
se preferir, 
pode-se usar o código a seguir:

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

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


flo

http://blogdicasblogueiros.blogspot.com.br/

Nenhum comentário:

Postar um comentário

Mensagem do formulário de comentário: