Dicas, truques, tutoriais, reviews, promoções e informação

sábado, 5 de maio de 2012

Páginas dentro de um post no Blogger

dividir post partes blogger

Um recurso bastante comum em certos blogs e sites é a paginação interna nas postagens. Trata-se de algo extremamente útil em muitas ocasiões, principalmente se o post que você está escrevendo é demasiadamente grande.

Para quem não entendeu, suponhamos que você queira dividir uma postagem em três partes (páginas), onde em cada página específica haverá um conteúdo diferente. Ainda não compreendeu?

Confira uma DEMO em nosso blog de testes.

páginas dentro post blogger

Enfim, tudo o que este recurso faz é separar o post em páginas.

Como adicionar este recurso

Nota: Este recurso só funciona quando a área de postagem está na guia HTML. Portanto, deixe para aplicar este recurso somente após ter escrito e revisado todo o seu artigo. Se ele for aplicado na guia Escrever não funcionará.

1. Na área de postagem clique na aba HTML e não volte em Escrever depois disso.

dividir postagem várias partes blogger/blogspot

2. Copie este código Javascript abaixo e cole no final do seu artigo.

<script src="https://sites.google.com/site/seututorial/seututorial/pagpost.js" ></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2','page-3' ]);
</script>

See the Pen aikvD by Seu Tutorial (@marcelost) on CodePen



3. Agora copie este código CSS e cole no final do artigo também, abaixo do código Javascript anterior.

<style>
div.content11 {clear: left;padding: 1em;}
div.content11.inactive {display: none;}
ol#toc {height: 2em;list-style: none;margin: 0;padding: 0;}
ol#toc a {background-color: <b><span style="color: red;">#00EEEE</span></b>;padding: 0px 8px 0px;margin: 1px 4px;text-decoration: none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;}
ol#toc a:hover {background-color: <b><span style="color: red;">#DBECF8</span></b>;padding: 0px 8px 0px;border:1px solid #204e73;}
ol#toc a:hover span {background-position: 100% -120px;}
ol#toc li {float: left;margin: 0 6px 0 0;}
ol#toc li a.active {background-color: <b><span style="color: red;">#48f;</span></b>background-position: 0 -60px;color: #fff;font-weight: bold;}
ol#toc li a.active span {background-position: 100% -60px;}
ol#toc span {background: url(tabs.gif) 100% 0;display: block;line-height: 2em;padding-right: 10px;}
</style>

See the Pen pyBkb by Seu Tutorial (@marcelost) on CodePen



OBS: Nas linhas destacadas em vermelho, você deve alterar pelo valor da cor que os botões terão. Tabela de cores HTML.

ol#toc a {background-color: #00EEEE => Esta é a cor padrão que ficará de fundo nos botões
ol#toc a:hover {background-color: #DBECF8 => Esta é a cor que aparecerá quando passar o mouse
ol#toc li a.active {background-color: #48f => Esta é a cor do botão da página que está sendo lida

dividir postagem por pagina dentro mesmo post

4. Agora poste este último código no começo do post.

<div class="content11" id="page-1">

Cole aqui o conteúdo da Página 1

</div>
<div class="content11" id="page-2">

Cole aqui o conteúdo da Página 2

</div>
<div class="content11" id="page-3">

Cole aqui o conteúdo da Página 3

</div>

<ol id="toc">
<li><a href="#page-1">1</a></li>
<li><a href="#page-2">2</a></li>
<li><a href="#page-3">3</a></li>
</ol>

See the Pen qcFzk by Seu Tutorial (@marcelost) on CodePen



Embora este último código seja auto-explicativo, vou explicá-lo mesmo assim.

Cole aqui o conteúdo da Página 1 => Nesta área você deve colocar todo conteúdo que aparecerá somente na 1ª página.
Cole aqui o conteúdo da Página 2 => Nesta área você deve colocar todo conteúdo que aparecerá somente na 2ª página.
Cole aqui o conteúdo da Página 3 => Nesta área você deve colocar todo conteúdo que aparecerá somente na 3ª página.

5. Pronto! Visualize o post e se estiver tudo ok, publique-o!

Lembrando mais uma vez que o editor de post deverá estar setado em HTML e não deve ser colocado em Escrever. Se você precisar de editar o post futuramente, edite-o em HTML mesmo senão o ID do seu perfil entrará no meio do último código, e ele vai parar de funcionar.

Veja as imagens de demonstração

dividir postagem varias partes blogger

post em partes blogger

texto em varias paginas dentro post blogger

31 comentários:

  1. brilhante. irei ver se funciona

    ResponderExcluir
  2. Excelente Dica Marcelo.
    Fiz no meu blog e deu muito certo.
    Beijao
    Mari

    ResponderExcluir
  3. Olá Marcelo !!! Fiquei maravilhada com este tutorial, sempre vejo esta opção em sites de revistas etc mas nem fazia idéia de que era possível utilizá-la em blogs e ainda que fosse simples de aplicar !
    Vou testar no meu blog de testes (meu template é todo zicado, então nem tudo funciona, mas acho que vai dar certo sim) e futuramente vou utilizar em meus artigos, adorei !!
    Obrigadíssimo por compartilhar conosco :)

    Um enorme abraço e bom restinho de semana !

    ResponderExcluir
  4. Olá Sammy,

    Poxa, é sempre um prazer receber sua visita e comentário. Sua presença aqui é e sempre será ilustre =)

    Quanto ao tutorial, faça o teste e qualquer dúvida ou problema, por favor, não hesite em me dizer. Eu vinha procurando por este recurso para o Blogger há anos, pois às vezes faço reviews e tutoriais muito extensos, o que o torna um pouco poluído tendo muitas informações juntas. Dividindo entre páginas internas ele fica muito mais navegável a deixa os leitores muito mais a vontade, não é mesmo?

    Obrigado mais uma vez Sammy!
    Um maravilhoso restinho de semana e ótimo fim de semana para você também.

    Grande abraço

    ResponderExcluir
  5. poh cara obrigado
    muito bom mesmo
    quebrou o galho bastante aqui

    sucesso ae

    ResponderExcluir
  6. fiz no meu blog mas ainda aparece todos os posts em uma mesma pagina e quando clico na pagina 2 ou 3 ele me joga na mesma pagina, tipo eu marquei pra exibir videos na pagina 1 do 1 ao 5 e na pagina 2 do 6 ao 10 ai quando clico na pagina 2 ele so sobe a pagina. pq?

    ResponderExcluir
  7. Respostas
    1. De nada, Pr Rodrigo.
      Grande abraço

      Excluir
    2. Excelente o tutorial, parabéns. Mas só uma dúvida: existe um limite de páginas que podem entrar em um post? Se existe, você o conhece e poderia me dizer mais ou menos quantas seriam? Tenho uns projetos futuros no meu Blog que exigirão muitas páginas...

      Excluir
    3. Limite não tem. Você pode criar quantas quiser.
      Porém, no código do tutorial eu só acrescentei 3 páginas. Para que existam mais, você terá de inserir manualmente as pages no primeiro código (Javascript) e no último (HTML).

      Excluir
  8. acho que esse codigo ai parou de funcionar,pode me ajudar?

    ResponderExcluir
  9. de uns dias pra cá parou de funcionar e ficou aparecendo uma caixa pedindo senha

    vc sabe o que pode está acontecendo? e a solução

    ResponderExcluir
    Respostas
    1. Sim e já foi resolvido.
      Era o código Javascript que havia sido removido do servidor. Reupei o código.
      Basta copiar novamente o código da segunda etapa e substituir.

      Excluir
  10. Bom dia Marcelo,

    Existe uma forma de após criar algumas páginas no blog, eu postar mensagens dentro das páginas e não só na principal. Exemplo. Divido o blog em menus por assunto e vou publicar sobre culinaria, ai posto na culinaria, depois vou publicar sobre hortas caseiras e vou lá, etc.. de forma que fique nas páginas o histórico das postagens? Obrigado pela aletnção.

    ResponderExcluir
    Respostas
    1. Olá,

      Acho que o que você quer são categorias, não? Exemplo: dividir o blog em diferentes categorias, onde cada categoria aborde um assunto específico. Seria isso?

      Dê uma olhada nesses posts abaixo e veja se não é o que você deseja:

      http://www.seututorial.com/2010/11/como-criar-subcategorias-no-blogger.html
      http://www.seututorial.com/2011/02/subcategorias-no-blogger-com-menu-drop.html

      Porque o que você quer, acredito que não se aplique a este artigo em si.

      Abraços

      Excluir
  11. Olá, Marcelo. Ótima dica. Parabéns e muito obrigado!

    Mas eu preciso dessa ferramenta nas páginas estáticas do blog. Tentei usar esse mesmo código, mas não deu certo. Ficou no quase, rs. Veja: http://paratestar12334.blogspot.com.br/p/teste.html#page=page-1

    Você não conhece um código igual para usar nas páginas estáticas?



    ResponderExcluir
    Respostas
    1. Olá Paulo,

      Infelizmente não conheço. Já tentei modificar algumas partes desse código para que ele funcionasse nas páginas estáticas, mas sem sucesso.

      Se um dia eu descobrir algo que possa realizar isso, pode ter certeza que acrescentarei no artigo.

      Abraços

      Excluir
  12. Excelente postagem! Utilizo wordpress será que teria uma maneira de utiliza-lo? Fiz o teste e não funcionou!

    ResponderExcluir
    Respostas
    1. Este código é para plataforma Blogger apenas, conforme título do post.

      Se não me engano, existe um plugin que gera esse efeito no Wordpress. Mas como usei tal plataforma há muito tempo atrás não sei mais qual é o plugin.

      No entanto, leia esse artigo:
      http://www.hashbangcode.com/blog/create-page-posts-wordpress-417.html

      Excluir
  13. Olá!

    Muito obrigada pelo seu post. Excelente dica!

    Se me permite, será possível explicar-me como posso fazer para aparecer no começo e não no final?

    Obrigada, desde já!

    ResponderExcluir
    Respostas
    1. Olá,

      Observe no código HTML (último código do artigo), a parte "ol Id", depois da última div, mova toda essa parte para o início do seu post.

      Ou seja, pegue a última parte, do último código, e coloque no início.

      Excluir
  14. Parabéns Marcelo, muito boa dica. Funciona direitinho.

    ResponderExcluir
    Respostas
    1. De nada Maria. Que bom que deu certo.
      Abraços

      Excluir
    2. Marcelo, é normal dar um "delay", por exemplo quando entro na seção que vai ter várias páginas, antes de dividir certinho (em 1,2,3,4 etc) aparece todo conteudo como que "junto".

      Também, tem como eu mudar o lugar do javascript, por exemplo puxar ele direto do meu PC ao invest de ele ir buscar no "sites.google/seututorial..."?

      Comecei a mexer hj com html, realmente interessante!

      Excluir
    3. Bruno, nos meus testes não houve esse "delay", não. Mas há muitas coisas que influenciam para que isso ocorra. Pode ser algum código presente no seu blog que esteja levando ele a dar esse "delay", entre outras coisas. Então, sim, em determinados blogs é normal.

      Quanto ao javascript, não sei se entendi bem sua pergunta. Você quer o javascript puro em vez de usar o HTML para carregá-lo, é isso? Se for, bastava editar o arquivo JS e copiar seu conteúdo.

      O conteúdo puro do javascript é esse do link abaixo:

      http://jsfiddle.net/wWDZy/

      Abraços

      Excluir
  15. Mas que excelente tutorial!... Muito obrigado Marcelo!

    Sem querer abusar,... Aproveito para perguntar se há a possibilidade de fazer outras edições nas numerações das páginas, tal como: inserir imagens, imagens sem fundo, imagens png, inserir outros textos, etc...

    Quanto ao tamanho das páginas, é possível predefinir uma altura padrão para todas elas? É possível, ainda, definir alturas diferentes para cada página?

    Mais uma vez, obrigado!

    Marcos Ramos
    Designer Industrial

    ResponderExcluir
  16. Estou maravilhada com o seu tutorial, parabéns!.
    Gostaria de saber se tem condições de aumentar mais de três páginas, acrescentei nos códigos mais uma página (4) e só o botão que apareceu, mas quando clico na página 4 não tem postagem.

    ResponderExcluir
  17. Queria que tivesse ao contrario, posts dentro da página. Alguém sabe algum?

    ResponderExcluir
  18. MARCELO COMO FAZER PARA QUE ESSE RECURSO FAÇA ANDAR A NUMERAÇÃO NOS BOTÕES PQ AS PÁGINAS QUE QUERO FAZER SÃO MAIS DE 100 PÁGINAS VC PODE ME AJUDAR?

    ResponderExcluir