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:

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