- 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.
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 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:
- 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+="<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 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.
não achei o body, como faço?
ResponderExcluirDesculpe pela demora, Michele. Esse é corpo do blog, então com certeza a tag body está aí. Procure pela tag de fechamento e cole o código acima dela, incluirei na postagem para ajudar .
Excluir