<style type="text/css">.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style="text/javascript">var pageCount=TT;var displayPageNum=T;var upPageWord="Anterior";var downPageWord="Próxima";</script><script style="text/javascript" src="http://sites.google.com/site/tptfiles/blogger-page-nav.js"></script>
Ok então; este código acima será o nosso widget como já havia dito. Nele vocês precisam fazer somente algumas modificações:
1 - Onde está escrito TT de azul deve ser adicionado o número de posts que desejam em cada página.
2 - Onde está escrito T de azul deve ser adicionado o número máximo de páginas que desejam que fique antes e depois da página que estiver sendo visualizada no momento. Por exemplo, se você colocar 5 e estiver vendo a página 9 ficará assim:
3 - Você pode alterar o texto também em azul que indica página Anterior e Proxima pelo texto que preferir.
Tendo feito estas alterações é hora de adicionarmos o widget ao blog. Para isso faça login no editor de seu blog vá até Layout e depois até Elementos da Página.
Em qualquer parte do layout (menos cabeçalho) clique em Adicionar um Gadget. Na pequena janela que se abrir, escolha HTML/JavaScript e clique no símbolo de + . Na janela seguinte, onde diz Conteúdo, é onde você deverá colar nosso código lá do começo. Se quiser podem colar o código já alterado ou colar sem as alterações e realizá-las neste momento. Isto feito clique em Salvar e pronto.
Agora vocês já tem a navegação de seu blog feita por meio de páginas numeradas. O código acima pode ser modificado para alterar cores, bordas, fontes e fundos mas exige um pouco mais de atenção e conhecimendo de html/CSS então quem souber e quiser fique à vontade para fazê-lo!!
Nenhum comentário:
Postar um comentário