Como inserir paginação numerada no blog

Antes desse tutorial é recomendável que baixe o modelo  do seu blog (template).

Irei ensinar a vocês a colocar paginas numeradas no blog, substituindo assim o ''postagens mais recentes'' e ''postagens mais antigas''.

Para quem não sabe uma navegação numerada é um Código que permite o leitor do blog navegar nas postagens do blog através de botões numerados.

Tutorial:

1º - Vá na aba ''Design'' do seu blog.
2º - Agora clique em Editar HTML.
3º - Agora aperte CTRL + F do seu teclado ( atalho de busca na página)  e procure por:

]]></b:skin>

 4º - ACIMA dele cole o seguinte código:

/*Paginação */.showpage {padding:6px 8px 6px 8px;margin:2px;text-decoration:none;border:1px solid #272727;color:#FFFFFF;background-color:#1fa1c5;font-weight:bold;}.showpageNum a {padding:6px 8px 6px 8px;margin:2px;text-decoration:none;border: 2px solid #107ea3;color:#FFFFFF;background-color:#1fa1c5;font-weight:bold;}.showpageNum a:hover {padding:6px 8px 6px 8px;margin:2px;font-weight:bold;border: 2px solid #107ea3;color:#FFFFFF;background-color:#7e7e7e;}.showpageNum a:active {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:#004dd7;border: 2px solid #107ea3;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;}.showpagePoint {padding:6px 8px 6px 8px;margin:2px;font-weight:bold;border: 2px solid #107ea3;color:#FFFFFF;background-color:#7e7e7e;}

5º - Depois clique em Salvar Modelo.
6º - Aperte CTRL + Fe desta vez procure pelo seguinte codigo:

#blog-pager

 7º -  Caso você encontre o código acima, Substitua desde o código acima até o fecha colchete ( } ) pelo código 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: (Os dois casos são o mesmo código)

#blog-pager{font:normal 12px Arial, Helvetica, Verdana;margin:10px 0px 0px 0px;padding:25px 0px 0px 0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitmEU99XJngQJIAMURL32k9dZQYorMGxgbnhSWQP_FsDB78NeyIbJ811p90OIU0X4NfcZVisDuipx1xtG6_KMNFhCI4PxdnMn2brEamY4O050eVnsyxNku8KXhMM73_DI57jeAO1om6u7x/s1600/Pagina%25C3%25A7%25C3%25A3o.png) no-repeat;width:518px;height:48px;text-align:center;}

• Destacado em Verde: Link da imagem do fundo da navegação.
• Destacado em vermelho: Largura da Imagem do fundo da navegação.
• Destacado em azul: Altura da imagem do fundo da navegação

8º -  Clique em Salvar Modelo. 
9º - Agora clique na caixa expandir modelos Widgets 
10º - 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 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'>.<span class='Apple-style-span' style='color: black;'>..<span class='Apple-style-span' style='color: red;'>Postagem Anterior</span> </span></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'><span class='Apple-style-span' style='color: red;'>Próxima Postagem</span>     .<span class='Apple-style-span' style='color: black;'>..</span></a>      </span>    </b:if>
     <b:if cond='data:blog.homepageUrl != data:blog.url'>      <a class='home-link' expr:href='data:blog.homepageUrl'><span class='Apple-style-span' style='color: blue;'><b>Página Inicial</b></span></a>
      <b:else/>      <b:if cond='data:newerPageUrl'>        <a class='home-link' expr:href='data:blog.homepageUrl'><span class='Apple-style-span' style='color: blue;'><b>Página Inicial</b></span></a>      </b:if>    </b:if>
  </div>

  <div class='clear'/>

• As partes destacadas em rosa são os nomes que irão aparecer em páginas internas do blog. 

11º - Clique mais uma vez em Salvar Modelo
12º - Segure as teclas CTRL + F e procure por:

</body> 

13º - E acima dele cole o seguinte código

<!-- Inicio do codigo de navegacao --> <script type='text/javascript'> var home_page=&quot;/&quot;;var urlactivepage=location.href;var postperpage=7;var numshowpage=4;var upPageWord =&#39;&#171;&#39;;var downPageWord =&#39;&#187;&#39;;</script> <script src='http://dl.dropbox.com/u/44914301/codigos/PageNavi.js' type='text/javascript'/>  

14º - Visualize seu template,se estiver tudo ok salve o modelo.Se não estiver ok:coloque o seu template novamente e fassa o upload.