sábado, 5 de maio de 2012
Páginas dentro de um post no 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.
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.
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
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
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
brilhante. irei ver se funciona
ResponderExcluirExcelente Dica Marcelo.
ResponderExcluirFiz no meu blog e deu muito certo.
Beijao
Mari
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 !
ResponderExcluirVou 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 !
Olá Sammy,
ResponderExcluirPoxa, é 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
poh cara obrigado
ResponderExcluirmuito bom mesmo
quebrou o galho bastante aqui
sucesso ae
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?
ResponderExcluirPorque você fez algo errado!
ExcluirFantástico !! Obrigado.
ResponderExcluirDe nada, Pr Rodrigo.
ExcluirGrande abraço
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...
ExcluirLimite não tem. Você pode criar quantas quiser.
ExcluirPoré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).
acho que esse codigo ai parou de funcionar,pode me ajudar?
ResponderExcluirCorrigido!
Excluirde uns dias pra cá parou de funcionar e ficou aparecendo uma caixa pedindo senha
ResponderExcluirvc sabe o que pode está acontecendo? e a solução
Sim e já foi resolvido.
ExcluirEra 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.
Bom dia Marcelo,
ResponderExcluirExiste 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.
Olá,
ExcluirAcho 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
Olá, Marcelo. Ótima dica. Parabéns e muito obrigado!
ResponderExcluirMas 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?
Olá Paulo,
ExcluirInfelizmente 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
Excelente postagem! Utilizo wordpress será que teria uma maneira de utiliza-lo? Fiz o teste e não funcionou!
ResponderExcluirEste código é para plataforma Blogger apenas, conforme título do post.
ExcluirSe 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
Olá!
ResponderExcluirMuito 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á!
Olá,
ExcluirObserve 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.
Parabéns Marcelo, muito boa dica. Funciona direitinho.
ResponderExcluirDe nada Maria. Que bom que deu certo.
ExcluirAbraços
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".
ExcluirTambé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!
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.
ExcluirQuanto 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
Mas que excelente tutorial!... Muito obrigado Marcelo!
ResponderExcluirSem 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
Estou maravilhada com o seu tutorial, parabéns!.
ResponderExcluirGostaria 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.
Queria que tivesse ao contrario, posts dentro da página. Alguém sabe algum?
ResponderExcluirMARCELO 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?
ResponderExcluirOlá,seria possivel carregalo apartir de uma pagina do meu blog?
ResponderExcluircoloquei o codigo num poster mas não funcionou,se puder me ajudar agradeço muito