quarta-feira, 24 de fevereiro de 2010

Estilizando as páginas estáticas do Blogger

As páginas estáticas do Blogger e as postagens são muito semelhantes e não há ainda uma ferramenta oficial para que possamos estilizá-la, mas há um hack na qual podemos deixar as páginas estáticas com uma largura maior, com ou sem a(s) sidebar(s), footer e o que mais você quiser.

Eis o código:

<!-- Começo dos estilos das páginas estáticas -->
<b:if cond='data:blog.pageType == "static_page"'><style>
.blog-pager, #blog-pager, .footer, .post-footer, .feed-links, .sidebar, #sidebar, #footer-wrapper { display:none;}
#main-wrapper{width: 1002px; float:none; margin: 0 auto;}
#main{width: 1000px; float:none; margin: 0 auto;}
</style>
</b:if>
<!-- Fim dos estilos das páginas estáticas -->

Esse código deve ser colocado após a tag <body> no template do seu blog.

Vamos para as explicações:

.blog-pager, #blog-pager, .footer, .post-footer, .feed-links, .sidebar, #sidebar, #footer-wrapper { display:none;} = Nessa linha, você coloca o que você não quer que apareça nas suas páginas estáticas, seja classes(#) ou ids(.): sidebar, footer, etc, sempre separados por vírgulas.

#main-wrapper{width: 1002px; float:none; margin: 0 auto;}
#main{width: 1000px; float:none; margin: 0 auto;}
= Aqui você coloca o comprimento da #main-wrapper e da #main conforme as medidas máximas do seu template, no exemplo, as medidas em px equivalem às do meu blog. Pode ser que em seu template só exista a main, então você apaga a linha do #main-wrapper acima.

O segredo está na condicional das páginas estáticas, que faz com que essas estilizações só ocorram nelas.

Caso tenha duas sidebars, e queira manter apenas uma, basta retirar do código a id ou classe correspondente e ajustar o novo comprimento da main e da main-wrapper.

O resultado pode ser visto nas minhas páginas estáticas acima, na linkbar.

Caso você use páginas estáticas a partir da personalização de posts, leia este artigo do Dicas Blogger, Páginas estáticas com CSS(Fonte de inspiração para este post)!

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google