Páginas numeradas para Blogs, fácil de instalar 4 modelos-Universo Blogueira

By Adriana Bentim em 23/08/2021

Tempo de leitura:

Páginas numeradas para blogs, fácil de instalar

Falando de temas para blogs uma das coisas mais importantes além de um tema responsivo são as páginas numeradas que ajudam a deixar o blog mais organizado.

Para quem gosta de personalizar seu próprio tema um dos itens que não podemos deixar de incluir, eu trouxe quatro estilos de páginas numeradas para vocês usarem podendo personalizar as cores e fonte numérica.

Quando configuramos o nosso blog possa definir quantas páginas irão aparecer na “Home”, do blog, assim quando adicionamos numeração as páginas do blog ele fica com um ar mais profissional e organizado.

Por padrão o blog possui os links, página inicial, postagens mais recentes, postagens mais antigas ao adicionarmos numeração as páginas o leitor terá mais facilidade e agilidade em navegar dentro do seu blog.

4 Modelos de páginas numeradas para blogs, fáceis de instalar e personalizar

Antes de inserir os códigos vá à aba layout do seu blog, e abra o gadget de postagens do blog nas configurações desse gadget você logo no início verá:

Opções da página principal, numero de postagens por página, coloque o número de quantas postagens você deseja que apareçam na página inicial do blog.
Confira com fica um dos modelos abaixo no blog de teste:

Demonstração

Agora vá em tema na aba do editor do blogger e clique nos três pontinhos à sua direita depois em editar HTML, de um ctrl + f e procure pela tag <body> abertura e de fechamento </body> e acima desse fechamento cole o seguinte código:

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<script type='text/javascript'>

/*<![CDATA[*/

var perPage=2;

var numPages=7;

var firstText ='First';

var lastText ='Last';

var prevText ='« Previous';

var nextText ='Next »';

var urlactivepage=location.href;

var home_page="/";

if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}

pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="Page "+currentPageNo+' of '+lastPageNo+"";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<a href="'+home_page+'">'+firstText+'</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a>'}}

if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<a href="'+home_page+'">'+prevText+'</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a>'}}else{if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a>'}}}

if(pageStart>1){if(currentPage=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a>'}}

if(pageStart>2){html+=' ... '}

for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+=''+jj+''}else if(jj==1){if(currentPage=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a>'}}else{if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a>'}}}

if(pageEnd<lastPageNo-1){html+='...'}

if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a>'}}

var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a>'}}

if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a>'}}

var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}

if(pageArea&&pageArea.length>0){html=''}

if(blogPager){blogPager.innerHTML=html}}

function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}

function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}

if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}

document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}

if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}

document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}

function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}

function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}

function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}

location.href=pAddress}

/*]]>*/

</script>

</b:if>

</b:if>

Onde está escrito é onde fará as alterações de quantas paginas configurou para aparecerem na página inicial e da quantidade de páginas que apareceram no template:

var perpage=2; numero de páginas por páginas — igual ao que configurou no painel de postagem;

var numpages=7; numero de páginas no template, geralmente deixo em 7;

var firstText ='First'; pode ser trocado por primeira;

var lastText ='Last'; pode ser trocada por última;

var prevText ='« Previous'; pode ser trocada por anterior;

var nextText ='Next »'; pode ser trocado por próxima;

Salve o código e de novamente um ctrl+ f e procure pela tag de fechamento ]]></b:skin>, acima dela você vai colar a personalização que escolheu, estando tudo certo salve, confira os códigos abaixo:

Modelo arredondado

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #93d1fa; background-color:#e5f4fe;border-radius:20px;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#93d1fa;text-decoration:none;color: #010e17;}

#blog-pager .pagecurrent{font-weight:bold;color: #010e17;background:#e5f4fe;}

.showpageOf{display:none!important}

#blog-pager .pages{border-radius:6px;}

Modelo com borda Dupla

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #fff9ef; background-color:#a78766; border:double 4px;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#e4c6ad;text-decoration:none;color: #fff;}

#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#a78766;}

.showpageOf{display:none!important}

#blog-pager .pages{border:none;}

Modelo em Hover pastel

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #fff9ef; background-color:#a78766; border:double 4px;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#e4c6ad;text-decoration:none;color: #fff;}

#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#a78766;}

.showpageOf{display:none!important}

#blog-pager .pages{border:none;}

Modelo paginas em gradiente

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #efe3da),color-stop(1, #bf9b97));background-image: -o-linear-gradient(top, #efe3da 0%, #bf9b97100%);background-image: -moz-linear-gradient(top, #efe3da 0%, #bf9b97100%);background-image: -webkit-linear-gradient(top, #efe3da 0%, #bf9b97 100%);background-image: -ms-linear-gradient(top, #efe3da 0%, #bf9b97 100%);background-image: linear-gradient(to top, #efe3da 0%, #bf9b97 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}

.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d28d83),color-stop(1, #f9f5f5));background-image: -o-linear-gradient(top, #efe3da 0%, #f9f5f5 100%);background-image: -moz-linear-gradient(top, #efe3da 0%, #f9f5f5 100%);background-image: -webkit-linear-gradient(top, #efe3da 0%, #f9f5f5 100%);background-image: -ms-linear-gradient(top, #efe3da 0%, #f9f5f5100%);background-image: linear-gradient(to top, #efe3da 0%, #f9f5f5 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}

a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}

#blog-pager .pages{border:none;background: none;}

Para trocar as cores você pode usar a tabela de cores e background aqui do blog, Paleta de cores.

Espero que gostem, qualquer dúvida ou sugestão deixem nos comentários.

Este artigo está arquivado em: Personalizações

2 comentários , comente também!

Michelle12/4/22
não achei o body, como faço?
ResponderExcluir
Respostas

Adicionar comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.