Páginas Numeradas Personalizadas (Super Fácil!)


Olá galerinha ^^ estamos pertinho do natal hein? Que delícia é o natal! Mas enquanto ele não chega que tal a gente aprender esse tutorial simples para deixar seu blog melhor ainda? Clique em Leia Mais para acompanhar mais um tuto Uprising Teen!


Pois é gente, acredito que muitos de vocês já tentaram fazer isso, colocar páginas numeradas no rodapé do seu blog, para alguns deu certo, para outros não.. Então que tal aprender de um modo fácil e que fica um luxo? Fica semelhante ao widget do Abu-Farhan, acho que tem muita gente que usa esse não é mesmo? Nesse tutorial, vamos aprender a fazer isto:


Vamos começar? Faça primeiro em um blog de testes.

Acesse seu blog > Layout > Adicionar Gadget HTML/JavaScript.

No gadget novo, cole isto:

<style type="text/css">
#blog-pager{
font-size:normal;
padding:10px 0;
clear:both;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
color:#fff; /* COR DA FONTE */
background:#FF4040; /* COR DE FUNDO NORMAL */
font-size: 10px; /* TAMANHO DA FONTE */
}
.showpageOf {
margin:0 8px 0 0;
font-size: 10px; /* TAMANHO DA FONTE */
background: #FFD39B; /* COR DE FUNDO DO TEXTO: Página 1 de... */
}
.showpageNum a:hover {
color:#fff; /* COR DA FONTE (MOUSE EM CIMA) */
background:#8B1A1A; /* COR DE FUNDO HOVER (MOUSE EM CIMA) */
font-size: 10px; /* TAMANHO DA FONTE */
}
.showpagePoint {
color:#000; /* COR DA FONTE SELECIONADA */
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #F77795; /* FUNDO SELECIONADO */
text-decoration: none;
font-size: 10px;
}

</style>

<script style='text/javascript'>
    var numshowpage=4; /* NÚMERO DE PÁGINAS A SEREM EXIBIDOS */
    var postperpage =3; /* NÚMERO DE POSTS A SEREM EXIBIDOS */
    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>


As instruções de como editar encontram-se no próprio código. Veja como seu layout deve ficar:


E aí? Acabou de vez com o problema de vocês? O tutorial foi adaptado e personalizado por mim, mas o script é do blog Dicas Blogger.

Aproveitando a deixa, visitem meu outro blog, Chelsea Smile