Navegação em Páginas Numeradas com CSS3

Olá pessoal, como sabem ter um bom e bonito layout é essencial. Ter navegação em páginas numeradas é uma das muitas coisas essenciais a ter num blog, pois é agradável de ver e facilita muito mais a navegação ao leitor no blog, por isso venho hoje ensinar-vos como coloca-las Blogger. A navegação possui efeitos de transição em CSS3 que fazem dela a melhor que vi até hoje para a plataforma Blogger. É a ultima versão de muitas que o Iago Melanias disponibilizou no Blogando com Facilidade.

Como Colocar Navegação em Páginas Numeradas com CSS3:

1º- Acesse ao painel do blog onde quer colocar a navegação e clique no separador Modelo
2º- De seguida clique em Editar HTML
3º- Prima CTRL+F e procure por:

]]></b:skin>

4º- Logo POR CIMA cole o 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;}

5º- Feito isso clique em Salvar Modelo
6º- Prima novamente CTRL+F e procure desta vez por:

#blog-pager ou .blog-pager

7º- Caso encontre o código que apresentei em cima substitua-o até }, como pode ver na imagem, pelo código que apresento abaixo.

Caso não encontre o código que apresentei em cima procure por ]]></b:skin> e cole EM CIMA DELE o código que apresento abaixo. Seja qual for o caso você vai utilizar o código:

 #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;}

8º- Feito isso clique novamente em Salvar Modelo

9º- Agora clique em

10º- Prima de novo CTRL+F e procure por: <div class=’blog-pager’ id=’blog-pager’> e selecione até <div class=’clear’/>, como pode ver na imagem abaixo.

11º- De seguida substitua tudo o que seleccionou pelo código que apresento 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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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º- Feito isso clique novamente em Salvar Modelo
13º- Prima novamente CTRL+F e procure por:

 </body>

14º- E ACIMA dele cole o código que apresento abaixo:

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

15º- Em postperpage e em numsshowpage em vez de 7 e 4 metam o numero que artigos que têm por página no vosso blog

16º- Clique em Salvar Modelo e verifique se deu tudo certo no blog

Espero que tenham gostado, boas blogadas e até ao próximo artigo!