Páginas estáticas com CSS

Páginas estáticas com CSS

6 10 99
Páginas estáticas com CSS 10 6 99
No final do mês passado, o Blogger lançou um recurso há muito tempo esperado por seus usuários – as páginas estáticas. Muita gente comemorou o lançamento, tal como aconteceu quando disponibilizaram o Jump Break. Até então, nós nos virávamos utilizando os hacks, também chamados de gambiarras, alterando os códigos html e css dos templates para obter essas e outras funções que não eram nativas do Blogger.
O problema é que tanto o Jump Break quanto as páginas estáticas, se mostraram incompatíveis com os templates que são criados pelos próprios usuários, sendo necessário a inclusão de mais códigos no html. Mesmo assim, muitos ainda se queixam que a sidebar foi parar embaixo do posts (no caso do jump break) ou que algum dos hacks para colocar o resumo das postagens não funcionam com as páginas estáticas.

Eu, particularmente, jamais deixaria de usar um template personalizado por causa das deficiências do Blogger; afinal, os templates padronizados são…digamos…simples demais. O jeito é continuarmos com nossas gambiarras, já que não existe suporte para templates personalizados – o que é altamente compreensível, pois seria impossível auxiliar cada um que aparece lá no fórum do Blogger para pedir ajuda para um determinado modelo.
Eu não uso o Jump Break e não vou usar as páginas estáticas; prefiro os hacks. Para colocar resumo de postagens, já ensinei dois tipos de hacks neste post - Como colocar o hack “Leia Mais” no Blogger – e hoje vou explicar como criar páginas estáticas usando CSS.
CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais. Fonte: HTML.net
Não sou  expert no assunto.Confesso que tenho dificuldades para usar CSS e que demorei para fazer este post justamente porquê sei que  irão surgir muitas dúvidas e que eu não saberei responder à todas elas, mas, por outro lado,  não seria correto da minha parte privá-los de algo tão interessante e funcional. Portanto, tenham calma :)
Bem, o que não deve aparecer em uma página estática? Data, hora, comentários, nome do autor, anúncios publicitários, convites para assinar os feeds e etc. Na página estática deve aparecer somente o título e o texto do post. Vejam estes exemplos:
Podemos também retirar a sidebar ou colocar só meia sidebar. Eu faço isso quando o post é menor do que o comprimento da sidebar, para ficar esteticamente mais adequado.
Chega de conversa e vamos logo para o tutorial, pois o post já está ficando enooooorme.
ATENÇÃO:  Os códigos abaixo  funcionam perfeitamente nos templates do Dicas Blogger, mas não posso garantir que funcionarão em outros modelos.
Por que tal advertência? Porque os códigos de cada template variam muito então sugiro que vocês façam testes para adaptar este tutorial ao template de vocês.
Antes de mais nada, apliquem o hack fornecido neste post - Páginas estáticas no Blogger sem data - para retirar a data da futura página estática e lembrem-se de desabilitar os comentários também, para que tudo funcione satisfatoriamente.
Criei o post (1) que dará origem à página estática, desabilite os comentários (2), escolha uma data mais antiga (3), clique em “editar html” e ao final  cole um dos códigos abaixo (4).

Páginas estáticas com sidebar
<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;} #comments {display:none} .post-header{display: none;}</style>
Páginas estáticas sem sidebar
<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none}  #comments {display:none} .post-header{display: none;} </style>
Páginas estáticas com meia sidebar
<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#sidebar-wrapper{display: none;}  #comments {display:none} .post-header{display: none;}</style>
Se você usa anúncios dentro dos posts ou um convite para assinar os feeds, basta criar uma div para eles e depois colocar no código da página estática. Por exemplo:
Esta parte vai no html do template => <div id='anuncio'> (código do anúncio) </div>
Esta parte vai na página estática => <style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none}  #comments {display:none} .post-header{display: none;} #anuncios{display:none} </style>
Cada parte do código CSS se refere à parte correspondente que não deve aparecer na página estática. Então temos: #comments = comentários / .post-footer = rodapé do post / #side-wrapper = sidebar/ .post-header = cabeçalho do post e assim por diante.
Acredito que irá aparecer algum aspirante a metablogger dizendo “ah eu faço diferente” Ótimo. Publique lá no seu blog, mande o link pro meu Twitter e darei RT :D
Pessoal, é isso. Espero que vocês tenham conseguido entender. Não consegui fazer um post menor, já que é um assunto novo aqui no DB e foi necessário uma boa introdução.
19 Comments
Comments
  1. Juliana, o fato das incompatibilidades dos templates criados pelos usuários do Blogger é justamente por causa da não inclusão dos códigos novos que a plataforma disponibiliza.
    Vou dar um exemplo, para a widget das páginas estáticas funcionar na horizontal é necessário que tenha abaixo do header a div crosscool, que sempre veio nos templates nativos, mas que é simplesmente ignorada pelos designers, pois ela não tinha nenhum uso prático.
    Desde o ano passado, o Blogger vem acrescentando novas condicionais que os designers nem se importam em acrescentá-las em seus templates. Quando eu troquei de template, fiz questão de incluir todos os novos códigos, justamente porque sabia que um dia iria usá-los.
    O usuário comum não tem que saber disso, mas o designer tem que estar sempre atento à essas mudanças.
    Uau, falei demais! Podem descer o porrete em mim! :o)

    ResponderExcluir
  2. Cidão, você ama o Blogger MUITO mais do que eu :P

    ResponderExcluir
  3. Sem palavras para a felicidade que fiquei ao saber (atrasada, eu sei) sobre as páginas estáticas... Obrigada pela notícia maravilhosa!
    Beijo

    ResponderExcluir
  4. Continuo achando complicado :x
    Prefiro continuar fazendo aquela gambiarra até o blogger dá um suporte pra isso x.x

    ResponderExcluir
  5. Era o tutorial que faltava para atender tantas solicitações e contatos reclamando da incompatibilidade ou dificuldade de usar os hacks padrões novos do Blogger.

    A dificuldade está mesmo nos templates customizados antes dessas mudanças. A opção de usar o "Leia mais" antigo tem resolvido pra muita gente.
    Eu mesmo tenho um blog pessoal em que continuo usando o "Leia mais" antigo por funcionar melhor.

    Já as páginas estáticas eu preferi manter o modelo das gambiarras, pois nos dá mais controle de personalização.

    ResponderExcluir
  6. Opa, assim que estiver de posse do meu computador, vou aplicar esses códigos para melhorar a aparência das minhas "páginas-estáticas-usando-a-gambiarra-aprendida-no-dicas-blogger" =D

    ResponderExcluir
  7. Eu também não uso páginas estáticas. Com uma template personalizada, não quero ir por aí. Nem uso o jump break. Corre-se o risco de ver a barra lateral no fundo dos posts. Já me aconteceu.

    ResponderExcluir
  8. Ótima dica Juliana!

    Embora o recurso das páginas estáticas seja ótimo, há seus problemas e instabilidades. Essa gambiarra veio em ótima hora, principalmente pra mim que estava à procura de um modo de colocar a página estática sem a sidebar.

    Valeu pela dica!

    Paulo Victor
    www.seriesnopc.com

    ResponderExcluir
  9. Olá juliana esse recurso é fascinante mas o que eu queria mesmo era saber como ocultar postagens da home page ou so exibir postagens de um marcador na pagina inicial

    ResponderExcluir
  10. Belo post eu estou só agora começando a fuçar o blog e suas funcionalidades e tenho que voltar a estudar css pois não lembro quase nada. Portanto tenho feito o famoso OAG (orientado a gambiarra) mas ainda vou chegar a desenvolver meu proprio template (ainda chego lá). No momento tenho 2 blogs de cobaias para montar um 3 "pra valer".

    abracos
    demerivas
    novocarrousado.blogspot.com

    ResponderExcluir
  11. Será que da pra esticar a área da postagem nos posts onde não aparecerem a sidebar?

    ResponderExcluir
  12. Consegui fazer com que a area de postagem se estendesse para a página inteira inserindo o codigo #main-wrapper{width:960px;}

    ResponderExcluir
  13. Juliana, please! Depois de inserir abaixo do texto, um dos códigos que vc forneceu, como faço para linkar a página estática ao título?

    Por exemplo: Quem Somos - como linkar a página estática neste título?

    Desculpe se perguntei besteira. Sou totalmente leiga em códigos CSS.
    Grata.

    ResponderExcluir
  14. Muito bom,se gostaria de saber como ocultar o footer tambèm se possìvel.

    ResponderExcluir
  15. Olha eu dinovo por aqui meu rei!
    Brigadao!
    Assim que terminar meu novo blog,busco um banner teu para a area de colaboradores.
    Beijao!

    ResponderExcluir
  16. E possível criar mais de 10 paginas no blog?

    ResponderExcluir
  17. Esse blog é show de bola , valeu...xD

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top