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.
