Pagina de navegação numerada

Página de navegação é realmente um incrível recurso, vasculhando a internet eu encontrei esse hacks no

 Pagina Navegação Para Blogger Blogger widgets

que agora pode ser usado na Plataforma do Blogger. Você pode ter visto a navegação da página numerada em muitos blogs WordPress . Mohamed Rias do Blogger tecnólogo já havia desenvolvido um sistema de navegação de página para Blogger. E realmente era um truque incrível que foi feito num momento em que ninguém podia sequer pensar em implementá-lo em Blogger. Teve alguns pequenos Probelams e agora Abu Farhan aperfeiçou-lo e ele já nos deu a solução. Esse novo método a navegação perfeita; imagem esclarece um pouco do que se trata.



Quando você usar esse recurso, você vai ver este tipo de navegação na página principal do blog e páginas com marcadores por etiquetas .

Implantação:

1.Faça o login para Painel do Blogger e navegue até Layout> Editar Html

Clique na opção da " caixa que diz" Expandir modelos de widgets '

3.Agora encontre esse codigo

]]></b:skin>

e substituí-lo por o codigo abaixo:

. 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;
}
]]></b:skin>

Esta é a parte do CSS que define a aparência da página navegação .Você pode modificá-lo conforme a sua necessidade

4.O próximo é do JavaScript. Encontre esse codigo, fica no fim da pagina

</ body>

e substituí-lo pelo codigo abaixo:

<! - Inicia a navegação da página ->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
pageCount var = 5;
displayPageNum var = 5;
var upPageWord = &#39; anterior &#39;;
downPageWord var = &#39; Próximo &#39;;
</ script>
src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' <script type='text/javascript'/>
</ b: if>
<! - Termina a navegação da página ->
</ body>

Como você pode ver, existem alguns parâmetros personalizáveis neste código

pageCount var = 5;

Este código determina o número de mensagens que seriam exibidas por página.

displayPageNum var = 5;

Este código determina o número de números de páginas adicionais de navegação que será exibido na página.

var upPageWord ='Previous'; você trocar a linguagem para "Anterior"
var downPageWord ='Next'; "Próximo"

Estas duas linhas determinar o texto que será mostrado para a página anterior e página seguinte, respectivamente.

Agora temos outro problema,o padrão dos marcadores é selecionado por default as páginas marcador vai mostrar 20 posts.Vamos ter que cortar esse de 20 para o valor que nós demos para o page Count variável. Para isso, terá de editar o nosso modelo

Como editar o modelo para o corte curto mensagens por página?

ainda com a pagina expandida encontre cada ocorrência de: 'data:label.url'

e substituír cada uma por esse codigo abaixo

'data:label.url + ?&max-results=5'

Aqui 5 é o número de postagem a serem exibidos por página.


Agora você deve ter o Blogger Page Navigation funcionando perfeitamente em seu blog. :)

Este tutorial é baseado em códigos de Abu Farhan e Rias. Portanto, se você pretende escrever este tutorial em seu blog, dê link de volta para eles.