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:
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.
Veja outros acessórios uteis para seu blog:
Código da Barra de Recomendações do Facebook (Posts Recomendados)
Personalizar o Link ou usar Imagens no Hack Resumo da Postagem (Leia mais)
Gadget com Botões Flutuantes de Redes Sociais no Blogger
Como Colocar Texto em Movimento (Letreiro Animado) no Blog
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.
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.
Veja outros acessórios uteis para seu blog:
Código da Barra de Recomendações do Facebook (Posts Recomendados)
Personalizar o Link ou usar Imagens no Hack Resumo da Postagem (Leia mais)
Gadget com Botões Flutuantes de Redes Sociais no Blogger
Como Colocar Texto em Movimento (Letreiro Animado) no Blog
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.
Marcadores: Acessórios, Configurações Avançadas, Gadgets, Template