» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Paginação no Blogger

Este hack é para você colocar, abaixo dos posts do seu blog, uma linha de paginação onde você vai poder escolher qual página quer ir dentro do blog. Facilitando a navegação. (Usabilidade)
Veja a demonstração aqui mesmo no TPV, vá até o fim da página principal.
Vantagens:
» O usuário pode navegar nas páginas de posts do seu blog e voltar quando quiser naquela que o chamou a atenção;
» Melhor organização do seu blog;
» Design simples e bonito sem ocupar muito espaço.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ SEMPRE TENTE ANTES NUM BLOG DE TESTES.
♥ SALVE O SEU TEMPLATE ANTES DE COMEÇAR, CLICANDO EM Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Vamos ao hack:
Clique em Layout ► Editar HTML ► Clique em Expandir modelos de widgets.
1º- Passo:
» Encontre a linha:
<b:include name='nextprev'/>
» Copie o código abaixo:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;}
A.blogpager:hover {
background:transparent;
color:white;}
#vwg-pager-first, #vwg-pager-last, #vwg-pager-next, #vwg-pager-prev{
padding:2px 5px;
border:1px #cccccc solid;
font-weight:bold;
margin:2px;}
#vwg-pager-first:hover, #vwg-pager-last:hover, #vwg-pager-next:hover, #vwg-pager-prev:hover{
padding:2px 5px;
border:1px navy solid;
background-color:#24618E;
color:white;
font-weight:bold;}
</style>
</b:if>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/>
</form>
</div>

<script type='text/javascript'>
var blogID = &quot;3972232990891503524&quot;;
var home_page = &quot;http://tpviara.blogspot.com/&quot;;
var pager_max_main = 3;

var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_prev_text = &quot;Prev&quot;;
var pager_next_text = &quot;Next&quot;;
</script>
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>
» Cole abaixo da linha:
<b:include name='nextprev'/>
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
Antes de ir para o 2ºPasso:
» Você pode colocar o código Javascript direto no seu template, evitando a hospedagem externa.
► Para isso substitua:
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>

► Pelo código javascript:
<script type='text/javascript'>
//<![CDATA[
/********************************
Blogger Pager Script v2.0
(C) 2008 by Anhvo, http://vietwebguide.com
Visit http://www.vietwebguide.com to get more cool hacks
********************************/

var pager_max_results = 20;
if(location.href.match("max-results=")){
pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("&")[0]);
} else if(!location.href.match("/search/label/")){
pager_max_results = pager_max_main;
}


var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
pager_pageurl = home_page+"search";
}
else {
label = location.href.split("/")[5];
label = label.split("?")[0];
label = label.replace(/ /g,"%20");
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
pager_pageurl = home_page+"search/label/"+label;
}

var pager_opening = 1;
if(location.href.match("popening=")){
pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]);
}

var num_pages = 1;

function createBlogPager(){
var script = document.createElement('script');
script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script)
}

function countnumpost(json) {
var posts  = json.feed.openSearch$totalResults.$t;
num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
//////////////////////////////
var a1 = document.createElement("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript:page(1)";
a1.innerHTML = pager_first_text;
document.getElementById("vwg-pager-first").appendChild(a1);
var a4 = document.createElement("a");
a4.className = "blogpager";
a4.title = "Jump to page: ("+num_pages+")";
a4.href = "javascript:page("+num_pages+")";
a4.innerHTML = pager_last_text;
document.getElementById("vwg-pager-last").appendChild(a4);

var prev = (pager_opening!=1) ? pager_opening-1 : 1;
var a2 = document.createElement("a");
a2.className = "blogpager";
a2.title = "Jump to page: ("+prev+")";
a2.href = "javascript:page("+prev+")";
a2.innerHTML = pager_prev_text;
document.getElementById("vwg-pager-prev").appendChild(a2);

var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
var a3 = document.createElement("a");
a3.className = "blogpager";
a3.title = "Jump to page: ("+next+")";
a3.href = "javascript:page("+next+")";
a3.innerHTML = pager_next_text;
document.getElementById("vwg-pager-next").appendChild(a3);

document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = num_pages;

}

function checkpager(){
var uinput = parseInt(document.pager20.showingpage.value);
if((uinput <= num_pages)&&(uinput >= 1)) {
page(uinput);
}
else {
alert("Invalid page number. Please try by another!");
document.pager20.showingpage.focus() ;
document.pager20.showingpage.select();
}
}

function getDateAndGo(json){
var date2 = json.feed.entry[0].published.$t;
ss = parseFloat(date2.substring(17,19));
if(ss<59) ss++;
if(ss<10) { ss = "0"+ ss; }
date4  = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}

function page(startindex) {
pager_opening = startindex;
var i = per_page*(startindex-1)+1;
var script2 = document.createElement("script");
script2.src =  pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
document.getElementsByTagName('head')[0].appendChild(script2)
}


createBlogPager();
//]]>
</script>

» O código COMPLETO da Paginação ficará assim:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;}
A.blogpager:hover {
background:transparent;
color:white;}
#vwg-pager-first, #vwg-pager-last, #vwg-pager-next, #vwg-pager-prev{
padding:2px 5px;
border:1px #cccccc solid;
font-weight:bold;
margin:2px;}
#vwg-pager-first:hover, #vwg-pager-last:hover, #vwg-pager-next:hover, #vwg-pager-prev:hover{
padding:2px 5px;
border:1px navy solid;
background-color:#24618E;
color:white;
font-weight:bold;}
</style>
</b:if>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/>
</form>
</div>

<script type='text/javascript'>
var blogID = &quot;3972232990891503524&quot;;
var home_page = &quot;http://tpviara.blogspot.com/&quot;;
var pager_max_main = 3;

var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_prev_text = &quot;Prev&quot;;
var pager_next_text = &quot;Next&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
/********************************
Blogger Pager Script v2.0
(C) 2008 by Anhvo, http://vietwebguide.com
Visit http://www.vietwebguide.com to get more cool hacks
********************************/

var pager_max_results = 20;
if(location.href.match("max-results=")){
pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("&")[0]);
} else if(!location.href.match("/search/label/")){
pager_max_results = pager_max_main;
}


var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
pager_pageurl = home_page+"search";
}
else {
label = location.href.split("/")[5];
label = label.split("?")[0];
label = label.replace(/ /g,"%20");
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
pager_pageurl = home_page+"search/label/"+label;
}

var pager_opening = 1;
if(location.href.match("popening=")){
pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]);
}

var num_pages = 1;

function createBlogPager(){
var script = document.createElement('script');
script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script)
}

function countnumpost(json) {
var posts  = json.feed.openSearch$totalResults.$t;
num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
//////////////////////////////
var a1 = document.createElement("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript:page(1)";
a1.innerHTML = pager_first_text;
document.getElementById("vwg-pager-first").appendChild(a1);
var a4 = document.createElement("a");
a4.className = "blogpager";
a4.title = "Jump to page: ("+num_pages+")";
a4.href = "javascript:page("+num_pages+")";
a4.innerHTML = pager_last_text;
document.getElementById("vwg-pager-last").appendChild(a4);

var prev = (pager_opening!=1) ? pager_opening-1 : 1;
var a2 = document.createElement("a");
a2.className = "blogpager";
a2.title = "Jump to page: ("+prev+")";
a2.href = "javascript:page("+prev+")";
a2.innerHTML = pager_prev_text;
document.getElementById("vwg-pager-prev").appendChild(a2);

var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
var a3 = document.createElement("a");
a3.className = "blogpager";
a3.title = "Jump to page: ("+next+")";
a3.href = "javascript:page("+next+")";
a3.innerHTML = pager_next_text;
document.getElementById("vwg-pager-next").appendChild(a3);

document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = num_pages;

}

function checkpager(){
var uinput = parseInt(document.pager20.showingpage.value);
if((uinput <= num_pages)&&(uinput >= 1)) {
page(uinput);
}
else {
alert("Invalid page number. Please try by another!");
document.pager20.showingpage.focus() ;
document.pager20.showingpage.select();
}
}

function getDateAndGo(json){
var date2 = json.feed.entry[0].published.$t;
ss = parseFloat(date2.substring(17,19));
if(ss<59) ss++;
if(ss<10) { ss = "0"+ ss; }
date4  = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}

function page(startindex) {
pager_opening = startindex;
var i = per_page*(startindex-1)+1;
var script2 = document.createElement("script");
script2.src =  pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
document.getElementsByTagName('head')[0].appendChild(script2)
}


createBlogPager();
//]]>
</script>
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR ALTERAÇÕES.
2º- Passo:
Viu as 3 linhas em vermelho?
1- var blogID = &quot;5879906334350418630&quot;;2- var home_page = &quot;http://endereçodoseublog.blogspot.com/&quot;;3- var pager_max_main = 6;
Você deve fazer algumas alterações nestas linhas:
1- Colocar o número do seu blogID:
Olhe para a barra de endereços do seu navegador. Olhou?
Veja o endereço do blogger como este da imagem:



Veja que neste endereço tem o número do ID do seu blog. Copie este número e substitua o nº em verde na linha do código abaixo:
var blogID = &quot;5879906334350418630&quot;;
2- Substituir a URl: [http://endereçodoseublog.blogspot.com/] pelo Real Endereço do SEU BLOG.
var home_page = &quot;http://endereçodoseublog.blogspot.com/&quot;;
3-Posts a serem Exibidos na Página Principal
Sabe quando você seleciona a quantidade de posts que devem ser exibidos no seu blog? Pois é, o Número de postagens da página inicial deve ser igual ao número do [var pager_max_main].
var pager_max_main = 6;
Para isso:
Clique em Elementos de página » Postagens no blog » Clique em Editar » Veja a imagem.
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR ALTERAÇÕES.

3º- Passo:
» Para que seu Blog Pager funcione corretamente e SEMPRE você deve baixar o Arquivo Javascript. Veja em azul no código original.
» Hospedá-lo em um site de sua preferência. Sugestão Dropbox.
» E substituir o endereço do Javascript original: [http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js] pelo endereço hospedado por você.

4º- Passo:
» Tirar os links Postagens mais recentes e Postagens mais antigas OU NÃO:
Em Layout ► Editar HTML ► Clique em Expandir modelos de widgets
» Encontre as linhas de código abaixo e apague-as:
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

» OU NÃO → Encontre as linhas acima e altere para que apareçam apenas nas páginas dos posts, sem as palavras Postagens mais recentes e Postagens mais antigas e SIM com os síbolos ◄ e ►.
» Basta selecionar os códigos descritos acima e substituir pelas linhas abaixo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'></a>
</span>
</b:if></b:if>


♦ Clique em SALVAR ALTERAÇÕES

Pronto! Seu blog ficou muito mais elegante com este hack! ;)

Fonte: Tradução e adaptação do link Blog Pager Version 2.0
Paginação no Blogger Paginação no Blogger Reviewed by Aurea R C on 8/05/2009 Rating: 5

20 comentários:

  1. É uma dica muito boa que adotarei em meu blog!
    Vai ficar ainda melhor e organizado!
    Valeu!

    ResponderExcluir
  2. Acabei de usar esse tutorial e deu absolutamente certo. Ficou ótimo.

    Agradeço encarecidamente.

    ResponderExcluir
  3. @Breno Bastos Poxa que legal! Não imagina o quanto me deixa feliz em saber que conseguiu fazer tudo sozinho e deu tudo certo!

    ResponderExcluir
  4. Ótima dica e ferramenta, já até mudei o templante do meu blog e estou atualizando
    vlw

    ResponderExcluir
  5. Olá! Instalei o template, coloquei do jeito que eu queria, falta algumas coisinhas, mas tá quase pronto. Segui este tutotial tudo foi indo bem, mas o blogpage não funciona de jeito nenhum e o último hack das postagem anteriores e proximas não funciona quando clica visualisar dá problema na tag b:if, fiz de tudo, mudei varias vezes mas não resolveu. Como o blog ja esta no ar eu gostaria de tirar o blogpage para futuramente com mais calma e paciencia recolocá-lo. Pode me ajudar?

    ResponderExcluir
  6. Desculpe-me, esqueci de dizer qual blog, entrando no perfil é o anjo. voce perceberá que quando clica em next aparece a demo do template original.

    ResponderExcluir
  7. @Marcia Bispo O blog pager já estava instalado no template que você está usando. Você o instalou novamente. A orientação que eu dei no post do template era para seguir o 2ºPasso deste tutorial para configurar o hack para funcionar com o seu blogID e seu endereço. Quando estiver mais calma, porque isso realmente exige calma para encontrar os códigos que são muito parecidos. Siga este tutorial para retirá-lo e depois instalá-lo novamente. Ou também pegue o código XML do seu template antes de instalá-lo e vá comparando com o seu fazendo um paralelo que você consegue arrumá-lo.
    Depois me fale se deu certo. A propósito, seu template ficou Lindo! Um abraço, Áurea

    ResponderExcluir
  8. Meu template não tem esse código b:include name='nextprev'
    o que faço ?

    ResponderExcluir
  9. Valeu!!!

    Em meu blog deu tudo certo!!

    gostei muito da dica.

    Mas fica paergunta tem como colocar as expressões first, next, go e as demais em portugues?

    Um abraço.

    ResponderExcluir
  10. Olá Áurea, tudo bem?

    Alterei na página de teste, que é esta.

    Minha dúvida agora é se alterar o ID do blog, nomes e excluir widgets consigo transportar o template para o blog definitivo.

    Muito obrigado pela dica.

    Bom domingo!

    ResponderExcluir
  11. ñ tô conseguindo ñ =/
    ñ tá funcionando, dá akela msgq minhas tags ñ estão fechadas corretamente.

    ResponderExcluir
  12. Oi Áurea, deu tudo certinho, obrigado.
    Só tenho uma dúvida, no 3º passo, onde
    fica o endereço do Javascript original,
    para ser substituido, pois não encontrei
    o que você citou.

    ResponderExcluir
  13. Quanto você cobra para instalar esse paginador pra mim?

    ResponderExcluir
  14. eu não entendi o 3° passo, ficaria grato se você pudesse faze-lo mais claro e mais explicado, porque fiquei confuso nessa parte. Se não for importa (ou se for) eu não a fiz, pois temi que não funcionasse bem (ja que eu não compreendi. abrçs

    ResponderExcluir
  15. Não tem como aparecer a numeração ao inves do usario ter que digitar a pagina...

    ResponderExcluir
  16. Olá, consegui fazer funcionar, mas queria que os numeros aparecessem fora da caixinha de digitação...ou seja, não teria como fazer só mostrar a numeração ao invez do formulario para digitar o numero....

    o seu hacker foi o único a funcionar depois de 3884374834787 testes de outros blogs...mas só queria resolver esse pekenino detalhe...

    muito obrigada

    ResponderExcluir
  17. É muito gratificante alterar o template do blog.

    Fica diferente de antes e vale a pena avaliar o resultado

    Muito obrigado por ele tutorial.

    Se você quiser, mais tarde, crio um post indicando este tutorial.

    Quem quiser ver o resultado em meu blog é só clicar nesse link:

    Aabaca Dicas

    ResponderExcluir
  18. Bom, parece que eu sou a única que ainda não conseguiu, né? É impressionante, faço 20 vezes e dá errado nas 20! Como pode uma coisa dessas? To frustrada...

    ResponderExcluir
  19. De todos os tutoriais q eu li ateh agora, o seu eh o que deu mais certo, exceto que o marcador ficouu na parte superior da pagina onde coloco as postagem. Como fazer pra deixar no rodape. Alguma dica? Obrigada.

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.