Numeração de Página personalizada + 4 modelos!

OOOOOI!

No outro dia fiz um post desse só que só postei 1 modelinho azul, mas prometi voltar com mais modelos, então como prometido, voltei. :]

Esses são beeem fofinhos, e eu mesma personalizei. (nooofa,)

Mas como eu disse lá no outro post desse mesmo tutorial, só que só com o modelo azul, eu não criei o tutorial, só personalizei, os créditos são do Follow Your Dreams.

Vamos lá? :3

Vá em Editar HTML, pressione CTRL + F e na caixinha que abrir, pesquise por:

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

Agora, cole acima desse que você acabou de achar, 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 pelo 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>

 Tudo certo até agora? Então por fim pesquise pela tag:

]]></b:skin>

E acima dela cole o código referente ao modelo desejado!

/*--- 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: #FFC0CB

;

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:#FFC0CB

;

}

#blog-pager-older-link,

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

.pagenavi .current {

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);

}

.pagenavi a:active {

border-color: #a0a0a0;

background-color: #dfdfdf;

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);

}

/*--- 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: #AB82FF;

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:#9B30FF;

}

#blog-pager-older-link,

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

.pagenavi .current {

border-color: #a0a0a0;

background-color: #9F79EE;

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: #9B30FF;

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);

}

/*--- 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: #63B8FF;

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:#1E90FF;

}

#blog-pager-older-link,

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

.pagenavi .current {

border-color: #a0a0a0;

background-color: #1E90FF;

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: #1E90FF;

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);

}

/*--- 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: #FFE4E1;

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:#FFC0CB;

}

#blog-pager-older-link,

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

.pagenavi .current {

border-color: #a0a0a0;

background-color: #FFC0CB;

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: #FFC0CB;

-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);

}

É isso abigas!
Até mais! ;)