Gostou do blog ? então curta nossa página no Facebook:

Numerar as Páginas do Blog

Este hacker aparenta ser muito difícil de colocar sendo que e muito fácil pois e bem simples de se instalar, este código foi traduzido pelo Gothic Darkness que era na versão inglês publicado no BloggerPlugins, já que o original é em inglês.

1) Adicionar o arquivo javascript ao seu template:

Vá em modelo, editar html não precisa marcar "Expandir modelos de widgets" e procure pela tag:

</body>

E cole o código abaixo acima dela:

<script style="text/javascript">
var pageCount=5;var displayPageNum=5;var upPageWord="Voltar";var downPageWord="Próxima";</script>
<script style="text/javascript" src="http://dl.dropbox.com/u/3173073/HacksBlogger/page-nav.js">
</script>

Querendo você pode alterar alguns parâmetros personalizáveis neste código.
var pageCount=5; -> número de postagens que irá aparecer em cada pagina. Altere a numeração, se preferir.

2) Corrigindo o Template:

Vá em layout, editar html e marque "Expandir modelos de widgets" e procure cada ocorrência de :

'data:label.url'

Incluindo as aspas, e substitua todas por:

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

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

Vou estar disponibilizando aqui 3 modelos para você escolher, e edite as cores do modelo que quizer.

Modelo 1

 ( Imagem Gothic Darkness )

Se você quiser o modelo da figura acima, copie todo o código abaixo e cole-o ANTES da tag ]]></b:skin>

/* PageNav
--------------------------- */
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc; /* edite a cor da borda se quiser*/
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc; /* edite a cor da borda */
background-color:#cccccc; /* edite a cor de fundo se quiser*/
}
.showpagePoint {
color:#333; /* edite a cor da fonte */
text-decoration:none;
border: 1px solid #cccccc; /* edite a cor da borda se quiser*/
background: #cccccc; /* edite a cor de fundo se quiser*/
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; /* edite a cor da borda se quiser*/
padding:3px;}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333; /* edite a cor da fonte */
}

Modelo 2

 ( Imagem Gothic Darkness )

/* PageNav
--------------------------- */
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px; }
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 4px;
margin:0 4px;
text-decoration: none;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -25px repeat-x; }


.showpageNum a:hover {
border-top:2px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-bottom:1px solid #999;
background: #999 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -50px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{ margin:0 8px 0 0;
}

Modelo 3

 ( Imagem Gothic Darkness )

/* 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;
}

Agora clique em salvar !


referencias:Gothic Darkness

9 comentários:

Dan disse...

Muito obrigado! Há tempos que eu queria numerar as páginas do Mídia e Ecologia.com e não conseguia! Agora, com a ajuda deste post, finalmente pude trocar o "postagens mais antigas" e o "postagenbs mais recentes" por números!!

Lidiane Andrade disse...

Tava querendo fazer isso a tempos, consegui.. Obrigada pela ajuda!

Jhon CCB disse...

Valeu cara ajudou muito!

Tales Godinho disse...

Pôh,muito obrigado.Há tempos tentava fazer ist e não conseguia,valeu mesmo.
Visita meu blog:http://chifredoboi.blogspot.com/

Felipe disse...

Valeu man, funcionou legal!

Parabens pelo blog, grande abraço!

Unknown disse...

Cara, no meu tá aparecendo essa mensagem quando eu tento salvar:
"Erro ao analisar XML, linha 1655, coluna 58: The reference to entity "max-results" must end with the ';' delimiter."

E eu fiz o seu tutorial duas vezes pra garantir. Alguém pode me ajudar? :/

francinelson disse...

DILSON GROSS

Acho que você deve ter feito errado ! tenta novamente que eu fiz aqui e deu certo, !

Unknown disse...

Muito legal. Eu estava tentando fazer isso há um tempo. Muito obrigado!

erjogosonline disse...

finalmente resolvi meu problema.. depois de passar um tempao em outros sites, a solução encontrei aqui !! valeu ao autor do post!

© 2010 | Rei do Bloguinho |Todos os direitos reservados
topo ↑