Faça Parte do Nosso Blog!

Receba Nossas Atualizações ou Siga-nos:

Siga Nosso Blog

Siga Nosso Blog e tenha Acesso ao Nossos Artigos no painel Blogger.
Seguir
OU

Assine Nosso Feed

Assine Nosso Feed e Tenha Acesso a Todos os Nossos Artigos por E-mail
Inscreva-se

terça-feira, 20 de setembro de 2011

Numeração nas paginas do blogger

Um simples tutorial para colocar as paginas do seu blogger numeradas!

O1. Primeiramente, faça o login em sua conta do Blogger.
O2. Quando estiver no painel no Blogger, você verá o nome do seu blog e logo abaixo do nome dele alguns link para acessar diversas ferramentas do Blogger. Você irá clicar em "Design"
O3. Agora clique no Botão Editar HTML.
O4. Agora pressione as teclas CTRL + F (atalho de busca na página)  e procure por:

]]></b:skin>
O5. - 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;}
O6. Depois clique em Salvar Modelo.
O7. Agora pressione novamente as teclas CTRL + F e desta vez procure pelo seguinte codigo:
#blog-pager
08.  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;}
O9. Agora clique novamente em em Salvar Modelo. 
1O. Agora clique na caixa expandir modelos Widgets 
11. 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'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><div id='home-post'>Página Inicial</div></a>
      </b:if>
    </b:if>

  </div>


<div class='clear'/>
12. Clique mais uma vez em Salvar Modelo
13. Novamente segure as teclas CTRL + F e procure por:
</body>
14.  E acima dele cole o seguinte código
<script type='text/javascript'>
var home_page=&amp;quot;/&amp;quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord =&amp;#39;&amp;#171;&amp;#39;;
var downPageWord =&amp;#39;&amp;#187;&amp;#39;;
</script>
<script src='http://javascrips-bcf.webs.com/javascripts/PageNavi.js' type='text/javascript'/>

  • OBS 1: o código destacado em vermelho é o número de postagens que são exibidos por página
  • OBS 2: O código destacado em azul é o número de páginas que são exibidos na navegação.
Créditos: Iago e Tutorial aperfeiçoado por Piter Costa 

3 comentários:

  1. Adorei as dicas estou melhorando meu blog cada vez mais mais eu nao entendi as parte que vc fale que tem que colocar acima vc quis dizer colocar na linha de cima ou subtituir?

    ResponderExcluir
  2. NÃO CONSEGUI MUITO DIFICL ACESSEM MEU BLOG SIGO DE VOLTA E SO PEDIR BEIJOS

    http://averdadeirahistoriadecinderela.blogspot.com/

    ResponderExcluir
  3. Consegui olha o Blog das minhas tias!!
    http://camomilanoivasbauru.blogspot.com.br/

    ResponderExcluir