12/02/2013

Tutorial: Paginas Numeradas


      Leitores queridos, desculpem por não atualizar o blog nesses 6 dias. Antes que perguntem, eu não fui viajar. Passei o carnaval em casa fazendo lição e trabalhos da escola, sim gente, já tenho um monte de coisas para fazer! Eu sei que prometi que não ia me ausentar no blog com a volta das aulas mais eu estava tão eufórica querendo fazer mil coisas e nunca sobrava tempo para eu entrar aqui no blog. Mas não fiquem preocupados que eu vou me organizar, fazer cronogramas se for preciso para eu vir pelo menos 1 vez na semana postar e retribuir os comentários. 
      Bom vamos parar de explicação e vamos ao post. Eu fiz a um tempo uma enquete aqui no blog, do que vocês queriam ver aqui, a enquete foi encerrada e os tutoriais foram os mais pedidos, então porque não começar agora?!
     O tutorial de hoje são as paginas numeradas, se você cansou das setas, ou a palavra 'next' como eu, vai adorar esse post. Na realidade eu estava doida para achar um tutorial desse que funcionasse, então fui abençoada por Deus (kkkk ó as ideias) e encontrei. De tão satisfeita que fiquei vim compartilhar com vocês! Pra quem não sabe as paginas numeradas que eu falo são assim:


Se voce enjoo das outras como eu, é só seguir os seguintes passos:

1. Vá no HTML do seu blog, procure pela tag </body> (Aperte Ctrl+F e digite para facilitar a busca)
Cole acima do trecho pesquisado, o seguinte código:
<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>
2. Agora procure por ]]></b:skin>  e cole logo acima, este código:
/* 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 */ } 

Gente no blog em que eu peguei esse tutorial o autor do post fala que:
 "Se não aparecer na hora, não se desespere, as vezes demora um pouco para aparecer no blog. Dentro de alguns dias aparece. A querida Gizaa deu algumas dicas por comentário e achei que seria útil colocar aqui também: Uma coisa que deve ser levada em conta é se os feeds do blog estão certos, as vezes tem algum erro e ai nada funciona, nem posts relacionados,nem paginação e todos widgets que usam jason. Ah e em blog de testes fechado também não funciona. E também o numero de posts por página (configurado no painel) deve ser o mesmo no script -nesse caso é 5- "

Créditos: Cherry Bomb

O que acharam do tutorial, gostaram? Comentem.

xoxo

20 comentários:

  1. Oi, sou a Nah do PMF.
    Gostei do tutorial, você explica muito bem :)
    Poderia me ajudar com o meu blog?
    Eu acho que ele está perdendo audiência e estou muito assustada com isso, pois eu sou nova aqui, então...
    Se puder divulgar meu blog, eu agradeço muito!
    Obrigada pela atenção ^^
    Um beijo e amei o blog.

    ResponderExcluir
  2. Estou fazendo um layout, (tentando na verdade)
    E eu apliquei esse tutorial mas não apareceu nada. Será que vai aparecer depois? Você já aplicou esse tutorial para ver se dava certo?
    Beijos
    sogarotasteen.blogspot.com

    ResponderExcluir
  3. Esse tuto é muito util! Ajuda muito na organização do blog!

    rascunhosdecaneta.blogspot.com

    ResponderExcluir
  4. seu blog e super fofo
    continue assim flor

    queria te convidar para conheçer meu blog
    tem varias diquinhas de make up
    se gostar e só seguir e depois deixa um comentario que imediatamente irei seguir você de volta (:
    beijos e estou aguardando sua visitinha lá

    blog ~~> http://deliniando.blogspot.com.br/

    ResponderExcluir
  5. Vim te chamar para preencher o formulario no blog
    e concorrer a um kit Summer!
    ficarei feliz se participar!
    Obrigada amore
    …/\_¸_/\
    ..(=•_•=)
    …ღ♥*♥ღ.•*
    (¯`•\|/•´¯)♥ ♥☆
    Fique com Deus
    www.coisasdeladdy.com

    ResponderExcluir
  6. Que blog legal
    vou voltar ai pra aprender
    tenho q aprender muita coisa =)
    adorei esse post quero fazer isso no meu blog!
    bjos

    ResponderExcluir
  7. Oii Flor!
    Acabei agora de descobrir o teu blog!
    Adorei o efeito que ficou na numeração das páginas.
    Já estou a seguir aqui!
    Visita o meu blog: http://baunilha-e-chocolate-bc.blogspot.pt/

    Se quiser comenta lá com o teu e-mail também para podermos falar.

    Kissus^^

    ResponderExcluir
  8. Adorei, vou testar no meu blog teste e se der certo vou colocar no CCR, é realmente muito prático!

    http://cerejacorderosa.blogspot.com.br/

    ResponderExcluir
  9. Bem útil esse seu tutorial, curti.
    @awnste
    www.senhoritaliberdade.com

    ResponderExcluir