New Navegaçao com css-3

Olá pessoal, estou aqui com mais um tutorial, neste tutorial irei ensinar como inserir a Nova Navegação em Páginas Numeradas para Blog Versão 4, esta nova navegação é muito bacana, ela possui uns efeitos de transição que dão uma elegância ao código



Acesse o Painel de seu blog e clique na Guia Modelo.
 Agora clique no Botão Editar HTML.
 Agora segure as teclas CTRL + F (atalho de busca na página)  e procure por:
]]></b:skin>
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;}
Agora segure novamente as teclas CTRl + Fe desta vez procure pelo seguinte codigo:
#blog-pager
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;}

Agora clique na caixa expandir modelos Widgets 
 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'>


Novamente segure as teclas CTRL + F e procure por:
</body>
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'/>

pronto galera agora só visualiza e salva fuiz