Menu

Tutorial: Paginação Numerada



   Muita gente tenta colocar a paginação numerada no blog mas não consegue porque muitas vezes a maneira ensinada é muito complicada, mas descobri um jeito simples e fácil. Me acompanhe

1. Abra a aba do lado esquerdo da sua tela onde está escrito Layout.
2. Clique em adicionar um Gadget e e abra um HTML/JavaScript e cole o código a seguir:

<style type="text/css"> #blog-pager{ font-size:12px; /* TAMANHO DA LETRA */ padding:10px 0; clear:both; } .showpageArea{ font-family:verdana,arial,helvetica; /* TIPO DA LETRA */ color:#000; /* COR DA LETRA */ font-size:13px; margin:10px } .showpageArea a{ color:#000; text-shadow:0 1px 2px #fff; font-weight:700 } .showpageNum a{ padding:3px 8px; margin:0 4px; text-decoration:none; border:1px solid #f2dd9d; /* COR DA BORDA EM ESTADO NORMAL */ -webkit-border-radius:3px; /* GRAU DE ARREDONDAMENTO DO FUNDO */ -moz-border-radius:3px; /* GRAU DE ARREDONDAMENTO DO FUNDO */ background:#f2dd9d; /* COR DE FUNDO DA NUMERAÇÃO EM ESTADO NORMAL*/ color: #000; } .showpageNum a:hover{ border:1px solid #ec92c6; /* COR DA BORDA DA NUMERAÇÃO EM ESTADO HOVER */ background:#ec92c6; /* COR DE FUNDO DA NUMERAÇÃO EM ESTADO HOVER */ color: #fff; /* COR DA FONTE DA NUMERAÇÃO EM ESTADO HOVER */ } .showpageOf{margin:0 4px 0 0 } .showpagePoint{ color:#fff;  /* COR DA FONTE DA NUMERAÇÃO ATIVA */ text-shadow:0 1px 2px #333; padding:3px 8px; margin:2px; font-weight:700; -webkit-border-radius:3px; -moz-border-radius:3px; /* COR DE FUNDO DA NUMERAÇÃO */ border:1px solid #999;  /* COR DA BORDA DA NUMERAÇÃO ATIVA*/ background:#9460b8;  /* COR DE FUNDO DA NUMERAÇÃO ATIVA*/ text-decoration:none } </style> <script style='text/javascript'>     var numshowpage=5; /* NÚMERO DE PÁGINAS EXIBIDAS*/     var postperpage =5; /* NÚMERO DE POSTS POR PÁGINA*/     var upPageWord="Anterior";     var downPageWord="Seguinte";     var home_page="/";     var urlactivepage=location.href; </script> <script style='text/javascript' src='http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pagenavi.js'></script>
Ps: Não é necessário mexer no código.


Nenhum comentário:

Postar um comentário

1. Respeite
2. Dê a sua sugestão
Obrigado por comentar!