Colocar Gadget com Numeração das Paginas do Blog

Encontramos um código de gadget de numeração das paginas do blogger. Nós já publicamos anteriormente sobre esse assunto e muita gente pergunta sobre isso tanto que o tutorial sobre: Numeração nas Páginas do Blogger têm mais 350 comentários contando os comentários do blogger e facebook juntos. Por causa disso vamos mostrar um código mais simples de instalar no seu blog e que nos testes que fizemos funcionou bem em vários templates.
Mas antes de colocar o código no seu blog você deve verificar nas configurações do Blogger o numero de postagens na pagina inicial do blog e depois colocar no lugar do numero 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 paginas no seu blog entre na pagina modelo, adicionar gadget, escolha a opção html/javascript e use o código abaixo:

<style type="text/css">
#blog-pager{font-size:normal;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000}
.showpageNum a{padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999;background:#ddd;color:#000;}
.showpageNum a:hover{border:1px solid #888;background:#ccc}
.showpageOf{margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999}
.showpagePoint{color:#fff;padding:3px 8px;margin:2px;border:1px solid #999;background:#666; text-decoration:none}
</style>
<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>
<script style='text/javascript' src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/paginacionbloggermtb.js'></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 mouse está sobre o link

.showpagePoint - pagina atual

Em cada uma delas você pode formatar como quiser alterando os estilos CSS:

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. Leia também sobre Formatação Especial nos Textos das Postagens.

Esse código é bem mais fácil de colocar pois não há necessidade de editar o html do blog por isso voltamos a esse assunto. Afinal sempre é importante achar um jeito mais fácil e rápido de fazer as coisas que precisamos ou queremos modificar no blog.