Paginação no Blogger

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

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 = "5879906334350418630";2- var home_page = "http://endereçodoseublog.blogspot.com/";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 = "5879906334350418630";

2- Substituir a URl: [http://endereçodoseublog.blogspot.com/] pelo Real Endereço do SEU BLOG.

var home_page = "http://endereçodoseublog.blogspot.com/";

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.

Endereço do Javascript para Download

» 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