A carregar...



Paginação no Blogger


Quando o número de posts no nosso blog começa a aumentar, será prático colocar-lhe paginação, para permitir-nos e aos nossos visitantes o salto de várias páginas em direcção aos posts anteriores (ou posteriores), em vez de múltiplos cliques no link "Mensagens antigas" (ou "Mensagens recentes") situado no fundo da página.
Foi o que fiz, e que podem ver e experimentar, exactamente no fundo desta página.

Então vamos ver como se faz.


Passo 1:
Painel de Controlo >> Esquema >> Editar HTML e clique na caixa "Expandir os Widgets"
Passo 2:
Encontrar
<!-- navigation -->
<b:include name='nextprev'/>
Passo 3:
Colocar imediatemente abaixo o seguinte código:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Pager v1.0 (C)2008 en.vietwbguide.com-->
<script type='text/javascript'>

var home_page = &quot;http://webdoispontozeroplus.blogspot.com/&quot;;
var blogID = &quot;7125179335870608043&quot; ;

var pager_max_main = 5;
var pager_num_of_button = 13;

var pager_link_alt_text = &quot;Click to go to page&quot;;
var pager_total_text = &quot;Total: &quot;;
var pager_posts_text = &quot; posts, &quot;;
var pager_pages_text = &quot; pages.&quot;;
</script>
<script src='http://vietwebguide2.googlepages.com/blogger_pager_script_v10.js' type='text/javascript'></script>
<hr/><div id='blogpagerShowToTal' style='margin:3px 2px 3px 2px; padding:2px; font-weight:bold'></div>
<div id='blogpager' style='margin:3px 2px 3px 2px; padding:2px;
border-bottom:1px #090 dotted; font-weight:bold'>Jump to page: </div>
<script type='text/javascript'>
window.onLoad = createBlogPager();
window.onLoad = pager_showTotal();
</script>
</b:if>

Obviamente substituindo o endereço do meu blog pelo endereço do seu, na linha 4;
e o meu blog ID pelo seu, na linha 5 (o ID dos seus blogs pode ser visto quando faz o login em http://blogger.com/home e depois poisa o rato num dos links, por exemplo "Definições". O ID aparece no fundo do seu ecrã, na barra inferior do seu browser.)

E é tudo.
Se quser estilizar os seus botões/links de Paginação pode colocar algum CSS.
Eu utilizei o seguinte,

<style type="text/css">
.blogpaging {
background:#CCC;
border:0px #ccc solid;
padding:2px;
}
</style>

imediatamente antes do final do tag </head>

Boa sorte!

NOTA: Este "tweak" foi retirado, traduzido e adaptado de http://en.vietwebguide.com/2008/07/blogger-pager-script-version-10.html











                         


Mensagens relacionadas (por Tags)







11 Comentárioa


DJ Keiroz disse...

Olá,
Venho procurando como colocar esse recurso no meu blog, mas até agora não consegui, já que uso o blog antigo que não tem o"Expandir os Widgets" (ou não estou achando).
Na minha página não aparece nem os links de "Mensagens antigas" (ou "Mensagens recentes").
Como faço para colocar pelo menos esses ultimos no blog antigo?

Desde já muito grato

luisj disse...
Este comentário foi removido pelo autor.
luisj disse...

Olá DJ Keiroz,
procure
#blog-pager-newer-link
e
#blog-pager-older-link
e
#blog-pager

e abaixo de cada um experimente colocar como mostro:

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

Caso não encontre, coloque o código na mesma abaixo de
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Uma sugestão: Acho que devia mudar/converter o seu blog para o novo blogger. Tem muito mais funcionalidades. Eu já fiz isso com o meu blog http://musicaesquisita.blogspot.com
há algum tempo mas não me lembro como fiz, embora me lembre que foi fácil. Não me lembro é dos pormenores para lhe dizer.
Entretanto pode ver este post, que pode elucidá-lo a esse respeito:
http://bloggerfordummies.blogspot.com/2007/12/upgrade-to-new-blogger-template-from.html
Depois diga se conseguiu fazer tudo ou se teve problema. Se eu puder ajudar...
Cumprimentos.

DJ Keiroz disse...

Tentei mas não deu certo. Acho que só convertendo para o novo blogger. Só tenho receio de perder dados e ter que colocar muita coisa tudo de novo na página.

obrigado

abraço

burity disse...

Fala Luis!
Dei uma passadinha aqui para te desejar um feliz 2009.
abrcs

luisj disse...

Oi! tudo bem consigo?
Desejo também um bom ano para si e para toda a sua família.
Como vão as coisas com os seus blogs? Tem trabalhado muito neles?
Abraço.

arte-e-manhas.com disse...

Olá!
Parabéns pelo "Web Dois Ponto Zero"; tem sido de grande utilidade para mim e já adicionei algumas aplicações com sucesso. Infelizmente esta não está a funcionar. Quando clico por exemplo na página 3 venho parar exactamente AQUI! :) Já removi o código e voltei a reler o post e a colar o código outra vez, mas o erro continua. Claro que estou a fazer algo errado (ou a não fazer alguma coisa importante), mas ainda não descobri o quê. Se me puderes dar uma luz, fico muito agradecida, pois eu sou francamente ignorante no funcionamento da internet e de códigos HTML.
Obrigada
Luísa

LM disse...

Olá outra vez!
Bem, meu amigo venceu a persistência e um pouco de inteligência.
Já está a funcionar na perfeição!
Obrigada na mesma e, mais uma vez, parabéns pelo blog. A minha próxima aventura será fazer um miniblog na sidbar.
De qualquer modo, se quiseres dar um saltinho ao Arte&Manhas, serás muito bem vindo.
Luísa

luisj disse...

Olá Luísa.
Ainda bem que conseguiste.
Obrigado pelo incentivo.
Vou passar pelo Arte&Manhas.

Dtudinho disse...

Como mudar a cor dos números e do espaço onde fica os números?

luisj disse...

A cor:
acrescente
color:#00ff00
no segundo bloco (css)
A cor não deve ser 00ff00 obrigatoriamente, mas sim o código da cor que desejar.
O espaço onde fica os números:
Não sei como alterar. como lhe digo no post, copiei de um outro blog.
No entanto suponho que é o próprio script que trata disso. Se assim for terá de fazer download do script, alterá-lo em conformidade e depois alojá-lo num servidor seu.
O script a que me refiro é o:
http://vietwebguide2.googlepages.com/blogger_pager_script_v10.js

Enviar um comentário