Aplicar estilos as páginas estáticas no Blogger

Desde que o Blogger implementou este recurso, muitos usuários passaram a utilizá-lo, porém, a grande maioria se depara com a dificuldade de fazer com que suas páginas estáticas se apresentem de forma diferente das demais páginas, já que, por padrão, as páginas estáticas se apresentam de forma semelhante às páginas de postagens.
A única diferença é que as páginas estáticas não aparecem a data, o que facilita ao usuários, já que a maioria, antes da ativação deste recurso, tinha que criar um post e fazer um macete colocando uma data bem antiga.
Infelizmente, ainda não há uma maneira “oficial” de aplicarmos estilos a elas, entretanto, podemos aplicar estilos CSS para que as páginas apresentem maior largura, sem sidebar, sem footer, ou o que você achar que não deva aparecer em suas páginas estáticas.
Neste tutorial você verá como proceder para deixar as suas páginas estáticas estilizadas de acordo com sua preferência.
Vale lembrar que, antes de mais nada, você deverá saber Como criar Páginas Estáticas no Blogger, para somente depois, aplicar os estilos.
É necessário também que você esteja familiarizado(a)e saiba como identificar os trechos correspondentes à Área total de Postagem com saiba a medida exata da largura que você quer que sua página estática tenha, caso queira que ela se apresente de forma mais larga, ocupando toda a área da coluna total da postagem, por exemplo.

Demo

No painel do Blogger, acesse o menu “modelo >> Editar HTML >> Expandir modelos de widgets”.
Copie o código abaixo e coloque-o antes de </head>

<!-- Estilos das páginas estáticas Inicio -->
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.blog-pager, #blog-pager, .post-footer, .post-header, .feed-links, .sidebar, #sidebar-wrapper,#comments,.footer-outer, #footer-wrapper { display:none;}
#main-wrapper{width: 950px; float:none; margin: 0 auto;}
.main-outer{width: 950px; float:none; margin: 0 auto;} /* designer de modelo*/
.post{width: 900px;margin: 0 auto;}
.post-outer{width: 900px;margin: 0 auto;padding:20px;} /* designer de modelo*/
</style>
</b:if>
<!-- Estilos das páginas estáticas Fim -->

Entendendo o código:
No código acima, todos os elementos que se encontram na 1ª linha não aparecerão nas páginas estáticas. Tudo o que você quiser OCULTAR em suas páginas estáticas, deverá estar contido no código, as classes(.) ou id(#) e sempre separando os elementos por vírgulas. O comando “display:none” serve para ocultarmos elementos.

Note que no código, as páginas estáticas se apresentarão da seguinte forma:

• sem coluna lateral – #sidebar-wrapper (=templates mínima), ou .sidebar(=designer de modelo).
• sem links de navegação postagens antigas e recentes – .blog-pager (=designer de modelo), ou #blog-pager(=templates mínima).
• sem links de feed ou postagens ATOM(.feed-links),
• sem coluna footer – #footer-wrapper(=templates mínima) ou .footer-outer(=designer de modelo).
• sem rodapé na postagem(.post-footer).

A coluna de postagem – .post(=templates mínima) ou .post-outer (=designer de modelo) – ocupará uma largura total de width:900px.
A coluna total da área de postagens(#main-wrapper e .main-outer ) ocupará uma largura de width: 950px.
Não esqueça que você deve editar a largura de acordo com a largura do seu template.

Nos templates Designer de Modelo,a coluna total da área de postagens está representado por: .main-outer, e a área de postagem está representado por .post-outer, no código acima, eu inclui os 2.

Caso queira, acrescente mais elementos para ficarem ocultos em suas páginas estáticas, de acordo com os elementos contidos em seu template, mas sempre incluindo-os na 1ª linha, separando cada elemento por vírgula.
E não se esqueça de editar os valores de width que estão no código, pois os valores que acrescentei servem apenas como exemplo.