Numeração nas paginas do blogger

Um simples tutorial para colocar as paginas do seu blogger numeradas!

O1. Primeiramente, faça o login em sua conta do Blogger.

O2. Quando estiver no painel no Blogger, você verá o nome do seu blog e logo abaixo do nome dele alguns link para acessar diversas ferramentas do Blogger. Você irá clicar em "Design"

O3. Agora clique no Botão Editar HTML.

O4. Agora pressione as teclas CTRL + F (atalho de busca na página)  e procure por:

]]></b:skin>

O5. - E ACIMA dele cole os seguinte código:

.showpage a:hover {font-weight: normal;text-shadow: 0 1px 0 black;color:white !important;background-color:#2691bb !important;margin:2px;text-decoration:none;border:1px solid #075270 !important;color:#FFFFFF;background-color:#1fa1c5;font-weight:bold;}
.showpage a {font-weight: normal;-webkit-transition: all 0.2s linear;-moz-transition: all 0.6s linear;-o-transition: all 0.6s linear;transition: all 0.6s linear;padding: 6px 8px 6px 8px;margin: 2px;text-decoration: none;border: 1px solid #D2D2D2 !important;color: black !important;background-color: #E2E2E2;text-shadow: 0 1px 0 white;}
.showpageNum a {text-shadow: 0 1px 0 white;-webkit-transition: all 0.2s linear;-moz-transition: all 0.6s linear;-o-transition: all 0.6s linear;transition: all 0.6s linear;padding:6px 8px 6px 8px;margin:2px;text-decoration:none;border: 1px solid #D2D2D2 !important;color:black !important;background-color:#E2E2E2;font-weight: normal !important;}
.showpageNum a:hover {text-shadow: 0 1px 0 black;margin:2px;font-weight:bold !important;border: 1px solid #075270 !important;color: white !important;background-color:#2691bb;}
.showpageNum a:active {font-weight:bold !important;padding:6px 8px 6px 8px;margin:2px;text-decoration:none;border: 2px solid #107ea3;color:#fff;background-color:#1fa1c5;}
.showpageOf {padding: 6px 8px 6px 8px;margin: 2px 2px 2px 2px;color: #5C5C5C;border: 1px solid #B9B9B9;font-weight: bold;background: #F4F4F4;}
.showpagePoint {color: white !important;padding:6px 8px 6px 8px;margin:2px;font-weight:bold;border: 1px solid #045575;text-shadow: 0 1px 0 black;background-color:#2691bb;}

O6. Depois clique em Salvar Modelo.
O7. Agora pressione novamente as teclas CTRL + F e desta vez procure pelo seguinte codigo:

#blog-pager

08.  Caso você encontre o código acima, você terá que substituí-lo desde o código acima até o fecha colchete (}) pelo código que mostrarei logo abaixo. Caso você não encontre o código acima você irá procurar por ]]></b:skin> e acima dele você irá colar o código abaixo: (Nos dois casos você terá de usar o código abaixo)

#blog-pager {font: normal 12px Arial, Helvetica, Verdana;margin: 10px 0px 0px 0px;padding: 25px 0px 0px 0px;background: white;border: 2px solid #CCC;width: auto;height: 40px;text-align: center;}
#next-post {margin-right: 12px;color: red;text-decoration: none;}
#older-post {margin-left: 12px;color: red;text-decoration: none;}
#home-post {color: blue;text-decoration: none;font-weight:bold;}

O9. Agora clique novamente em em Salvar Modelo. 
1O. Agora clique na caixa expandir modelos Widgets 
11. mais uma vez segure as teclas CTRL + F e desta vez procure por: <div class='blog-pager' id='blog-pager'> e selecione dele até<div class='clear'/> e substitua todo o código que você selecionou pelo código abaixo:

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><div id='older-post'>POSTAGEM ANTERIOR</div></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><div id='next-post'>PRÓXIMA POSTAGEM</div></a>
      </span>
    </b:if>

     <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><div id='home-post'>PÁGINA INICIAL</div></a>

      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><div id='home-post'>Página Inicial</div></a>
      </b:if>
    </b:if>

  </div>


<div class='clear'/>

12. Clique mais uma vez em Salvar Modelo
13. Novamente segure as teclas CTRL + F e procure por:

</body>

14.  E acima dele cole o seguinte código

<script type='text/javascript'>

var home_page=&amp;quot;/&amp;quot;;

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=4;

var upPageWord =&amp;#39;&amp;#171;&amp;#39;;

var downPageWord =&amp;#39;&amp;#187;&amp;#39;;

</script>

<script src='http://javascrips-bcf.webs.com/javascripts/PageNavi.js' type='text/javascript'/>

• OBS 1: o código destacado em vermelho é o número de postagens que são exibidos por página
• OBS 2: O código destacado em azul é o número de páginas que são exibidos na navegação.

Créditos: Iago e Tutorial aperfeiçoado por Piter Costa