Numerando as páginas de navegação do blog

Numerar as páginas de navegação do blog é uma técnica muito usado por blogueiros, facilita muito a navegação tornando sua página mais agradável aos leitores. O código que vou mostrar nessa postagem é bastante simples de instalar. Preste atenção nos seguintes passos para instalar esse recurso no seu blog.

Seu blog ficará assim, depois que instalar esse código no layout:

É possível personalizar a cor do fundo, no final da postagem vou mostrar como fazer isso.

Logado na sua conta, vá ao painel administrativo do blog e clique em Layout.

Acessando o Layout do blog

Agora clique em Adicionar um Gadget e em seguida clique em HTML/JavaScriptAdicionar.

Inserindo HTML/JavaScript no Layout do blog

Copie esse código abaixo e em seguida cole ele na Gadget que acabou de abrir (HTML/JavaScript).

<style type="text/css"> #blog-pager{ padding:10px 0; font-size:14px !important; clear:both;} .showpageArea{ font-family:verdana,arial,helvetica; color:#000; font-size:11px !important; margin:10px} .showpageArea a{ color:#000} .showpageNum a{ padding:3px 8px; margin:0 2px; text-decoration:none; border:1px solid #FFFFFF; background:#6495ED; color:#000;} .showpageNum a:hover{ border:1px solid #0000CD; color: #fff !important; background:#0000CD} .showpageOf{ margin:0 2px 0 0; padding:3px 8px; margin:0 2px; text-decoration:none; border:1px solid #FFFFFF; color: #000 !important; background:#4169E1} .showpagePoint{ color:#FFFFFF; padding:3px 8px; margin:2px; border:1px solid #FFFFFF; background:#191970; text-decoration:none} </style> <br /> <script style='text/javascript'> var numshowpage=4; var postperpage =7; var upPageWord="Página Anterior"; var downPageWord="Próxima Página"; var home_page="/"; var urlactivepage=location.href; </script><br /> <script> eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 g;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=g-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1z\'>1A "+g+\' 1B \'+d+"</3>";6 16=K(g)-1;4(g>1){4(g==2){4(i=="o"){5+=\'<3 7="e"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="e"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="e"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="e"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="e"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="e"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(g==l){5+=\'<3 7="1C">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="e"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="e"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="e"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="e"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\'...\'}4(D<d){4(i=="o"){5+=\'<3 7="e"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="e"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(g)+1;4(g<d){4(i=="o"){5+=\'<3 7="e"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="e"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j 7="1D-1E"><a 9="1F://1G.1H.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S"></a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1k=5}4(E&&E.P>0){5=\'\'}4(18){18.1k=5}}C 1a(Q){6 R=Q.R;6 1l=K(R.21$22.$t,10);1g(1l)}C 1f(){6 h=u;4(h.f("/r/s/")!=-1){4(h.f("?S-c")!=-1){n=h.F(h.f("/r/s/")+14,h.f("?S-c"))}b{n=h.F(h.f("/r/s/")+14,h.f("?&c"))}}4(h.f("?q=")==-1&&h.f(".5")==-1){4(h.f("/r/s/")==-1){i="o";4(u.f("#G=")!=-1){g=u.F(u.f("#G=")+8,u.P)}b{g=1}y.1m("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.f("&c-k=")==-1){j=20}4(u.f("#G=")!=-1){g=u.F(u.f("#G=")+8,u.P)}b{g=1}y.1m(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1n(\'1o\')[0];6 z=y.1p(\'m\');z.1q=\'1r/1s\';z.1t("T",B+"U/V/W?1u-1v="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1w(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1n(\'1o\')[0];6 z=y.1p(\'m\');z.1q=\'1r/1s\';z.1t("T",B+"U/V/W/-/"+n+"?1u-1v="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1w(z)}C 1b(Q){1c=Q.R.24[0];6 1x=1c.1y.$t.F(0,19)+1c.1y.$t.F(23,25);6 1d=26(1x);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|showpageNum|indexOf|nomerhal|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Página:|de|showpagePoint|w2b|pagenav|||||style|font|size|7pt|float|right|margin|10px|target|_blank||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{})) </script>
Se preferir pode alterar o texto que está entre aspas:
var upPageWord="Página Anterior"; 
var downPageWord="Próxima Página"; 

var numshowpage=4; (Esse código indica o número de páginas que serão exibidas no menu de páginas, deixei para ser exibido 4 páginas, você pode alterar esse valor para exibir mais ou menos)

var postperpage =7; (Esse código indica o número de postagens que serão exibidas por página, deixei o padrão que geralmente é exibido em blogs, você pode alterar o número de postagens que serão exibidas, basta mudar o que grifei de laranja)



Pronto! visualize o seu blog e veja como ficou.

E para finalizar...
Espero que este tutorial lhe tenha sido útil, compartilhe esse post e comente abaixo. Até a próxima pessoal e fiquem com Deus.