Numeração de página personalizada!

OOOOI! Tudo beiiim?
Acho super mais fácil um blog com os números da página, em vez do padrão que vem no Blogger, que é só 'Postagens Antigas' ou 'Postagens Recentes' ou algo assim, rs.
Confunde muiiito esse modelo padrão, então quando vou personalizar o blog do zero uma das primeiras coisas que adiciono é essa numeração.
Esse tutorial que vou ensinar hoje não é meu, é do Follow Your Dreams, eu só personalizei ele com cores diferentes e pá.
Vamos lá?






        Vá em Editar HTML, aperte CTRL + F e pesquise pelo seguinte código na caixinha que abrir:

<b:includable id='mobile-index-post' var='post'>

Achou? Então agora, acima deste que você acabou de achar, cole esse aqui:

<b:includable id='page-navi'>

<div class='pagenavi'>

<script type='text/javascript'> var pageNaviConf =

{

perPage: 5,

numPages: 8,

firstText: &quot;Primeira&quot;,

lastText: &quot;Última&quot;,

nextText: &quot;&#187;&quot;,

prevText: &quot;&#171;&quot;

}

</script>

<script src='http://yourjavascript.com/51103499221/paginacaonumerada.js' type='text/javascript'/> <div class='clear'/>

</div>

</b:includable>

Agora pesquise por esse trecho:

<b:include name='nextprev'/>

E substitua-o por esse aqui:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<b:include name='page-navi'/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<b:include name='page-navi'/>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:include name='nextprev'/>

</b:if>

</b:if>

Certo? Agora, por fim, cole o código referente ao modelo acima de:

]]></b:skin>

                                                                     

/*--- Paginacao numerada --- */

.pagenavi .pages {display: none;}

#blog-pager,

.pagenavi {padding: 6px 10px;

clear: both;

text-align: center;

margin: 30px auto 10px;

}

#blog-pager a,

.pagenavi span,

.pagenavi a {

text-decoration: none;

color: #000;

background-color: #AFEEEE;

padding: 8px 12px;

border: 2px dotted #a0a0a0;

font-size: 16px;

vertical-align: middle;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

margin: 4px 4px;

-webkit-transition: .0s ease-in!important;

-moz-transition: .0s ease-in!important;

-ms-transition: .0s ease-in!important;

-o-transition: .0s ease-in!important;

transition: .0s ease-in!important;

}

#blog-pager a:hover,

.pagenavi a:hover {

border-color: #a0a0a0;

background:#87CEEB;

}

#blog-pager-older-link,

#blog-pager-newer-link { float: none }

.pagenavi .current {

border-color: #a0a0a0;

background-color: #87CEEB;

background-image: none;

-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

}

.pagenavi a:active {

border-color: #a0a0a0;

background-color: #FF82AB;

background-image: none;

-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

}

Depois eu faço mais modelos,
BEIJUUUS :3