17/02/2017

Paginação do blog numerada [003]


Yo bunnie's como vão? Sei que alguns não gostam, mas eu amo paginação numerada e já postei duas formas aqui no blog, aplicando paginação dentro do HTML que infelizmente não funciona em todos os layouts, e também aplicando paginação em um Widget que é o melhor funciona desde que seja configurado direitinho. Hoje trago uma terceira forma que funcionou e maior parte dos layouts que testei. 

1. Vá até o HTML de seu blog e procure por </body> (CTRL+F para ativar a pesquisa), ao encontrar cole acima dele o seguinte código:

Códigos
<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord=&quot;Anterior&quot;;var downPageWord=&quot;Próxima&quot;;</script> <script src='https://sites.google.com/site/drwtexte/dewplay/page-nav.js' style='text/javascript'> </script>

2. Agora procure por ]]></b:skin> e cole logo acima, este código:

Códigos

.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 */ } 

Salve e prontinho! Você pode editar e deixar ao seu gosto. Encontrei esse tutorial no Cherry Bomb =3
Se a paginação não aparecer, verifique se o feeds do blog estão corretos, ele também não funciona se o blog estiver fechado. O código está configurado para aparecer 5 postagens, vá em configurações e configure para 5 postagens iniciais.

2 comentários:

  1. Também gosto de paginação numerada. Não se funciona no meu atual template.

    ResponderExcluir
    Respostas
    1. Uma dica que posso dar é colocar a paginação antes de começar editar o layout, assim com forme for arrumando e aplicando código poderá ver qual é que o faz sumir ou não funcionar então basta remover.

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345