Blogger: Como colocar páginas numeradas no blog

   Olá caros leitores do Amotrix, hoje estamos com mais um tutorial Blogger, e neste artigo você irá aprender a como colocar páginas numeradas no seu blog, um hack criado por  equipe Deluxe Blog Tips, e modificado por Matheus Amorim [equipe Amotrix]. Um hack fácil e rápido de se instalar.




Lembrete:

Antes de começar, recomendo que você faça um backup do seu template e/ou teste em um blog de testes, o script foi modificado para ser traduzido para Português Brasil, com melhorias ortográficas e gramáticas e introduzidas alguns efeitos a mais.

Instalando o estilo (essencial)


1º - Entre no Blogger e efetue seu login
2º - Dentro do Painel vá até Modelo (Painel > Mais Opções > Modelo)
3º - Clique em Editar HTML e em Expandir Modelos Widgets;
4º - Procure por:

]]></b:skin>

5º - Cole acima o seguinte código:

/* --- Pagina Numerada --- */
.pagenavi{
clear:both;margin:10px auto;text-align:center
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .pagenavi a:hover,.pagenavi .current{
background:#ff8400;
color:#fff;
text-decoration:none}
 .pagenavi .pages,.pagenavi .current{ font-weight:bold } .pagenavi .pages{border:none}



6º - Salve.
 
Instalando o Script

1º - Procure por:

<b:widget id='Blog1' locked='true' title='Postagens no Blog' type='Blog'>

 
Ou algum parecido

2º - Abaixo introduza o seguinte código:

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: &quot;Primeira&quot;,
lastText: &quot;Última&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script src='http://amotrix.webs.com/Codigos/JavaScript/pagenavi.js'/>
<div class='clear'/>
</div>
</b:includable>


3º - Procure por:

<!-- navigation -->
<b:include name='nextprev'/>


4º - Substitua por:

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

5º - Salve.


Pronto, agora é só visualizar em seu blog.

Comentários

  1. Cara seus tutoriais estão caindo como uma luva no meu BLOG, UNICO que tudo que sigo direitinho uq vc publica e dah certo.

    Bom estou fazneod a minha parte, agradecendo pelo tutorial.

    Percebi que o pessoal não agradece muito aki, tomara que não te desanime e continue postando tutoriais para blogger.

    muito obrigado.

    ResponderExcluir
    Respostas
    1. Agradecemos o comentário e a visita. E estamos felizes por você

      Excluir

Postar um comentário

    Comentários que contenham em seu conteúdo seguintes temas: pornografia, palavrões, palavras ofensivas ou preconceituosas, spam, todas palavras em Caps Lock, não serão aceitos.