16 fevereiro 2016

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


2 comentários:

  1. já tentei fazer outras vezes não consegui, vou tentar fazer assim, quem sabe da certo dessa vez, adorei seu blog e já estou te seguindo!!
    http://penteadeiradaanapaula.blogspot.com.br/

    ResponderExcluir
  2. Espero que dê certo! Boa sorte ;D
    Obrigada, beijos!

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...