Há o modelo convencional para navegar pelas páginas do Blog que consiste em três links, no final da página, onde o visitante pode passar para a próxima, voltar ou ir para a “Home”. Já mostramos aqui com substituir o texto por imagens. Algumas pessoas viram as modificações nesta função na nossa página, onde numeramos as páginas, e nos perguntam como fazer isso. Veja abaixo, como criar um sistema de paginação para o seu blog.
ATUALIZAÇÃO: Há uma nova versão que funciona melhor no Blogger e sem erros:
Você pode ver isso funcionando na página principal do [ Ferramentas Blog ] e passar, página por página, numeradas, vendo todos os nossos artigos e saber quantas páginas temos. Então, vou mostrar como inserir este recurso em seu blog também. Esta é uma dica muito complexa e grande, exigindo atenção e cuidado, mas é fácil de fazer e dá um aspecto mais profissional para seu blog.
Siga as etapas dessa dica com muito cuidado e atenção e, antes de fazer qualquer modificação e começar, faça um backup do modelo de seu blog para pode restaurar o original caso algo saia errado ou não goste do resultado.
Instalando os códigos.
Vamos em “Layout” e “Editar HTML” no painel do seu blog. Não marque “Expandir modelos de widgets” – não precisa marcar essa opção para fazermos as modificações que seguem e ficará mais fácil de encontrar as linhas dos códigos indicados.
A primeira parte é inserir o código CSS na parte chamada de “Style”. Ela fica acima da linha “]]></b:skin>”. Encontre essa tag e, antes dela, cole o código que segue:
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
E, abaixo disso, cole o JavaScript que instala a função e a executa. Como o código é muito longo, para ver ele, clique em “Abrir Código”:
<!-- Paginação Java início -->
<script type="text/javascript"> function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/"; var isLablePage = thisUrl.indexOf("/search/label/")!=-1; var isPage = thisUrl.indexOf("/search?updated")!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; var pageCount = 5; var displayPageNum = 5; var upPageWord = 'Anterior'; var downPageWord = 'Próxima'; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp = post.published.$t.substr(0,10); var title = post.title.$t;
eFlag++; } }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ }//end for(var p =0;p< htmlMap.length;p++){ if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; if(isPage || isFirstPage || isLablePage){ var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } } </script> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>
<!-- Paginação Java final -->
As partes indicadas em vermelho determinam, nessa ordem, a quantidade de artigos que aparecerá por página e, o segundo, a quantidade de números na lista.
Agora, salve o modelo e veja o resultado. Se algo sair errado, é só encontrar as marcações e apagar o que foi inserido. Teste de todas as maneiras para ter certeza de que o resultado é como deseja. Não sei como modificar mais detalhes no layout desse estilo de paginação. Vimos o modelo acima descrito e, tal como usamos, no Blogger Buster – se quiser mais detalhes, visite (está em inglês).
muito bom esse tutorial testei e aprovei…
funcionou! muito obg *-*