26 de setembro de 2010

9

Como colocar páginas numeradas no blog!

Colocar páginas numeradas no blog é algo essencial, ainda mais quando tratamos de blogs que possuem mais de 50 posts. Os marcadores são uma excelente forma de organizar o blog e facilitar ao leitor encontrar o que ele deseja. Mas para blogs que possuem muito conteúdo, os marcadores tornam-se insuficientes. Assim se o seu visitante deseja navegar através de seu blog para ver mais conteúdo, ele terá de fazê-lo de uma só vez, pois imagine o trabalho que ele terá posteriormente se ver apenas metade do conteúdo e quiser continuar de onde parou...

Assim, o intuito é sempre facilitar e dar comodidade aos seus leitores. Por isso os ensinaremos hoje esta técnica simples e vital. Vamos ao passo a passo.

Páginas Numeradas no Blog

Lembrando que antes de realizar qualquer mudança no template é essencial fazer um backup do seu modelo. Assim se algo der errado, você poderá coltar ao seu antigo modelo facilmente. Se não souber como fazer backup, clique aqui e aprenda a fazer um backup do seu template.

  • Faça login no Painel do blogger
  • Selecione a aba “Design”
  • Editar HTML
  • Marque expandir modelos widgets
  • Procure pelo seguinte código:

    ]]></b:skin>

  • Acima do código acima, cole o seguinte trecho que dará as características da numeração:

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #cccccc;
    margin:0 2px;
    padding:2px;
    }
    .showpageNum a:hover {
    border: 1px solid #cccccc;
    background-color:#cccccc;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #cccccc;
    background: #cccccc;
    margin:0 2px;
    padding:2px;
    }
    .showpageOf {
    text-decoration:none;
    padding:2px;
    margin: 0 2px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #cccccc;
    padding:2px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#333333;
    }

  • Agora procure pelo código:

    </body>

    E cole imediatamente acima dele o seguinte código:

    <!-- Inicio do codigo de navegacao -->
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    var pageCount=4;
    var displayPageNum=4;
    var upPageWord =&#39;Anterior&#39;;
    var downPageWord =&#39;Próximo&#39;;
    </script>
    <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
    </b:if>
    <!-- Final do codigo de navegacao -->

Os números (somente números) destacados nas cores vermelho e azul podem ser modificados conforme a vontade do blogueiro. O número em vermelho representa a quantidade de artigos que serão exibidos por página. É importante que esse número não seja muito alto para não causar lentidão na abertura do blog. Já o número em azul representa a quantidade de números de navegação que serão exibidos no final da página.

Veja como ficará em seu blog:

Página Numerada

Salve e pronto, o seu blog terá um aspecto bem mais profissional. Mais importante que isso você terá dado prioridade ao que há de mais importante no seu blog, os seus leitores. Não deixe de acompanhar nossas pequenas dicas que farão do seu blog mais agradável e profissional! São sempre dicas simples, porém de grande relevância!

Coloque seu email:

Início

9 comentários:

Botoja disse...

A família Botoja agradece o tutorial.

Denilson disse...

VocÊ pode editar o JS, se quizer tudo no português. RSRSR. "page" = página. rsrsrsr.

SOSVIP disse...

Botoja: Por nada

Denilson: A dica é muito boa, porém ainda não me aventuro na edição de JS. hehe

Tapajós disse...

Depois de vários dias procurando "tutos" para essa função, confesso que foi só aqui que consegui um código que realmente funcionava, bem explicado e de uma forma bastante simples, como disse depois de vários dias, vale a pena comentar aqui e agradecer, obrigado :D

SOSVIP disse...

Tapajós: Fico feliz que tenha ajudado. vez por outra publicamos tutoriais simples que possam dar uma ajuda aos blogueiros.
Volte sempre!

Tapajos disse...

Só uma pergunta...

não tem como mudar esse "pages(51)" ??

coloca-lo em portugûes?

SOSVIP disse...

Tapajós: Tem sim. Basta você upar um código js com os mesmos parâmetros, substituindo o "pages" por páginas ou modificar o mesmo e reupar num local adequado.

Tapajós disse...

Opa! vlw...

consegui, mas alguns posts sumiram...

Mesmo assim muito obrigado pela ajuda

Anônimo disse...

cara eu consegui mais nao consigo tirar o peges me ajuda por favor

Postar um comentário

Agora você é VIP. A palavra está com você agora. Aproveite e faça seu comentário!
PS.: Se for xingar, ofender ou usar palavras de baixo calão, não perca o seu tempo pois CERTAMENTE excluiremos seu comentário!
Sinta-se a vontade.

Related Posts with Thumbnails