Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Códigos e Scripts

Código para numerar páginas no blog

Atenção: Este Hack não está mais funcionando. Confira novo artigo disponível com o código Corrigido!

Sabe aquela numeração no final da pagina que mostra em qual página você está e quantas tem antes e depois dela? Quer aprender a colocar numeração na página do blog? (Veja exemplo na figura abaixo)

Vamos a primeira parte da instalação.
Copie todo o código abaixo e cole-o ANTES da tag ]] :


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Você deve personalizar as cores das letras, fundo e bordas na paginação para combinar os estilos de acordo com seu template ou a seu gosto, trocando sempre onde está:
border: 1px solid #ccc; (cor e estilo da borda)
background-color:#ccc; (cor de fundo)
Estes elementos aparecem várias vezes no código, portanto eu sugiro que você modifique todos , senão quando exibir a numeração nas páginas internas, elas podem aparecer com cores diferentes.

Salve as modificações e vamos passar a segunda parte da instalação, que é adicionar o JavaScript.
Vá até Layout >> Editar HTML , não marque o “Expandir modelos de widgets” e localize a tag (ou similar):


<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='blog'>
</b:section>

...(restante do código)...

</div>

Cole o código abaixo entre </b:section> e </div>:


<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 = 'Previous';
var downPageWord = 'Next';



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;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
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 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>

Agora vamos configurar a contagem de páginas e posts.(parte destacada em negrito no código)
var pageCount = 5; ? aqui define o número de postagens que irá aparecer em cada pagina, e deve ser o mesmo número de postagens que você definiu em quantidades de post.
var displayPageNum = 5; ? aqui define a quantidade de links para outras paginas que serão exibidas(Ex:1,2,3,4,5).

Salve as modificações.
Você só conseguirá visualizar as páginas numeradas, depois de salvar as modificações. Não é possivel visualizar o resultado somente na pre-visualização.

Uma Dica Importante:
Se você possui um Domínio Personalizado você precisa alterar o “. Com” localizado no trecho:
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==” .com/”;
Se você possui dominio do blogspot.com, não altere nada!

Este código foi modificado e traduzido a partir do publicado no Blogger Buster em inglês.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

8 Comentários

  1. Fernando disse:

    post como deixar numeração das paginas do blogger igual a sua numeração

  2. sex movies n' rock n' roll disse:

    …Esse código foi criado pelo BloggerBuster???

  3. ::Clau:: disse:

    @Havnes e @Antonio Santos:
    Esse código foi criado pelo BloggerBuster, eu apenas traduzi e não testei, vou dar uma analisada, pesquisar e testar pra tentar entender o pq está dando erro, e qualquer coisa aviso aqui.

  4. João Carlos R. Ostrovski disse:

    Obrigado por responder, mas não tem estes 3 pontinhos.
    Valeu e obrigado.

  5. António Santos disse:

    a mim tb me deu esse erro, e n tou a usar esses 3 pontinhos

  6. ::Clau:: disse:

    @Havnes:
    Na parte do código onde está: title="Postagens no blog" type="blog, abaixo de </b:section> existe "…"(três pontinhos). esses pontinhos representam o restante do código que tem no seu template…NÃO é pra colar esses três pontinhos não…eu acho que deu erro por isso.

  7. João Carlos R. Ostrovski disse:

    Olá.
    Achei bem legal este post.. Ai então fui usa-lo em meu blog, fiz a primeira etapa e tudo ocorreu bem, porém na segunda parte houve um problema…

    Fiz exatamente como foi dito aqui, e deu o seguinte erro:
    "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity "max-results" must end with the ';' delimiter."

    Não sei como arrumar isto, já que segui todas as etapas conforme dito aqui.
    Se puder me ajudar agradeço.
    Valeu e prbs pelo blog.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.