Navegação do blog numerada

Oi pessoas, tudo bom? Hoje eu vim trazer a vocês um tutorial encontrado no blog Cherry Bomb, achei ele super da hora, e acho que seria util pra quem está construindo um novo layout, ou quer mudar a navegação do seu blog. Mas então chega de papo e vamos lá!


Imagem retirada do blog Cherry Bomb
Dentro da caixa do HTML aperte CTRL F, abrindo a caixa de pesquisa procure pela tag  </body> e acima dessa tag cole:

<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord=&quot;Anterior&quot;;var downPageWord=&quot;Próxima&quot;;</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>

Agora procure pela tag ]]></b:skin>  e acima dessa tag cole:
/* PageNav --------------------------- */
.showpageArea {
font-family:Verdana, Geneva, sans-serif;
color: #000;
font-size:11px;
margin:10px; }
.showpageArea a { padding: 3px 8px;
margin: 2px;
font-weight: 700;
text-decoration: none;
color:#777; /* COR DA FONTE DO LINK PRÓXIMA */
border:1px solid #ccc; /* BORDA DO LINK PRÓXIMA */
background: #eee; /* COR DE FUNDO DO LINK PRÓXIMA */ }
.showpageNum a { padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999; /* BORDA DA NUMERAÇÃO */
background: #ddd ; /* COR DE FUNDO DA NUMERAÇÃO */ }
.showpageNum a:hover {
border:1px solid #888; /* BORDA DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */
background: #ccc; /* COR DE FUNDO DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */ }
.showpageOf{ margin:0 8px 0 0; }
.showpagePoint {
text-decoration: none;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border:1px solid #999; /* BORDA DA NUMERAÇÃO ATIVA */
background: #666; /* COR DE FUNDO DA NUMERAÇÃO ATIVA */
color:#fff; /* COR DA FOONTE DA NUMERAÇÃO ATIVA */ }

PS.: Se não aparecer na hora, fique tranquilo(a), pode demorar mesmo de aparecer.  

Um comentário:

  1. Esse efeito é sempre legal, hehe. Fica bem fofo.

    http://littlethingoficial.blogspot.com.br/

    ResponderExcluir

Por favor leia antes do comentário:

- Comente sinceramente!
- Comente sobre o post antes de fazer algum pedido!
- Aceito pedidos por comentários !
- Aceito criticas construtivas , nada de critica sem pé nem cabeça!
- Não aceito comentários anônimos !
- Não aceito xingamentos!
- Leio todos os comentários e retribuo quando possível!
- Comentários de agressões ou xingamentos , nem tente não aceitarei !