DICA 22: NUMERAÇÃO NAS PÁGINAS DO BLOGGER

DICA 22: NUMERAÇÃO NAS PÁGINAS DO BLOGGER

Mas antes de colocar o código no seu blog você deve verificar nas configurações do Blogger o número de postagens na página inicial do blog e depois colocar no lugar do número 3 nesta linha do código:

var postperpage =3;

E somar mais um e colocar nesta outra linha do código:

var numshowpage=4;

Ou seja, aqui é numero 4 porque em nosso exemplo usamos 3 na outra configuração, mas poderia ser qualquer quantidade de postagens que você tenha configurado no seu blog.

Agora vamos instalar esse gadget com a numeração das páginas no seu blog entre na página modelo, adicionar gadget, escolha a opção html/javascript e use o código abaixo:

Código de Exemplo:

<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:#dcf4d1;

color:#000;}

.showpageNum a:hover{

border:1px solid #6aa84f;

color: #fff !important;

background:#6aa84f}

.showpageOf{

margin:0 2px 0 0;

padding:3px 8px;

margin:0 2px;

text-decoration:none;

border:1px solid #FFFFFF;

color: #000 !important;

background:#dcf4d1}

.showpagePoint{

color:#FFFFFF;

padding:3px 8px;

margin:2px;

border:1px solid #FFFFFF;

background:#38761d;

text-decoration:none}

</style>

<br />

<script style='text/javascript'>

var numshowpage=4;

var postperpage =3;

var upPageWord="Anterior";

var downPageWord="Próxima";

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>

Clique para salvar o gadget e pronto. Mas você pode personalizar esse gadget de numeração de paginas do blogger fazendo uma formatação especial nos botões trocando as cores de fundo, estilo e cores das fontes e bordas da numeração de pagina usando estilos CSS, veja o que faz cada linha de código e depois algumas dicas de CSS e formatação de texto:

·  .showpageNum a - links das outras paginas

·  .showpageNum a: hover – efeito quando o rato está sobre o link

·  .showpagePoint - pagina actual

Em cada uma delas você pode alterar como quiser:

·  background - cor de fundo. Se quiser trocar a cor é só trocar os números que aparecem depois do sinal #. Veja aqui o Código das Cores.

·  border - formatação das bordas, leia aqui um tutorial sobre Colocar ou alterar as bordas

·  color - cor dos números. Aqui o funcionamento é igual à cor de fundo para trocar é só precisa colocar o código de outra cor.