29 julho 2020

Páginas numeradas para blog 4 modelos

🗨
Bom dia , amigos leitores !

As páginas numeradas, ajudam a deixar o blog mais organizado.

Quando configuramos o nosso blog podemos 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.

Bora! Lá.


páginas-numeradas-para-blogs



Páginas Numeradas para Blogs 4 Modelos

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 pagina principal, numero de postagens por pagina, coloque o número de quantas postagens você deseja que apareçam na pagina inicial do blog.

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>  e acima desse fechamento cole o seguinte código:


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}
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 pagina inicial e da quantidade de paginas que apareceram no template:

var perpage=2; numero de paginas por paginas - igual ao que configurou no painel de postagem ;
var numpages=7; numero de paginas no template , geralmente deixo em 7 ;
var firstText ='First'; pode ser trocado por primeira;
var lastText ='Last'; pode ser trocada por ultima;
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 

demonstração paginas arredondadas

#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

demonstração modelo 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 

demonstração 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 

demonstração modelo 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.

Depositphotos [CPS] WW

Nenhum comentário:

Postar um comentário

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri. Gostou?! Deixe seu comentário, criticas e sugestões, elas são muito importantes para o blog crescer e melhorar. Curta, compartilhe, ajude o blog a crescer.
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Atualizações do Instagram