Blogger – Páginas Estáticas – Ocultando itens do post-footer e retirando a sidebar

O leitor Marcelo me pediu um tutorial explicando como fiz para retirar a sidebar (barra lateral) das páginas estáticas e como fiz para ocultar os comentários e demais elementos do post-footer (rodapé da área de postagem). Esse eu aprendi no Mundo Blogger.

Vou explicar agora:

Antes de explicar como funciona, você tem que saber que todo elemento em HTML que não é renderizado, é descrito com a propriedade display:none;. Ou seja, mesmo que o código HTML exista, você não o verá em funcionamento no seu template. Usamos isso no Blogger para esconder elementos no CSS. É exatamente essa declaração que irá esconder todos os elementos indesejáveis no html.

Não entendeu nada? Freud explica:

Encontre (ctrl +f) no seu template isso aqui:  ]]></b:skin> e abaixo dele, coloque o código que virá a seguir:


<!-- PÁGINAS ESTÁTICAS -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.blog-pager, #blog-pager, .post-footer, .sidebar, #sidebar-wrapper, .feed-links, 
.date, .post-comment-link, .post-backlinks post-comment-link, .post-location, .post 
.post_comm, #comments, .post-labels, #footer-wrapper { display:none;}

#main-wrapper{width: 800px; float:none; margin: 0 auto;}

.post{width: 700px;margin: 0 auto;}
</style>
</b:if>
<!-- FIM PÁGINAS ESTÁTICAS -->
DISSECANDO O CÓDIGO ACIMA – O QUE PODE SER ALTERADO:

PRIMEIRA PARTE


.blog-pager, #blog-pager, .post-footer, .sidebar, #sidebar-wrapper,
.feed-links, .date, .post-comment-link, .post-backlinks post-comment-link, 
.post-location, .post .post_comm, #comments,
.post-labels, #footer-wrapper { display:none;}

Na primeira parte, tudo que escondi com a declaração display:none; foram exatamente os elementos que eu não achava que era pertinente para as minhas páginas estáticas, ou seja, você pode excluir os elementos que informei ou acrescentar, de acordo com a sua necessidade, e todos os elementos que eu escondi, foram separados por vírgula no código.

SEGUNDA PARTE – ALTERANDO O VALOR DO #main-wrapper (ÁREA TOTAL) E DEFININDO OS VALORES DE .post (ÁREA DE POSTAGEM):

#main-wrapper{width: 800px; float:none; margin: 0 auto;}

.post{width: 700px;margin: 0 auto;}

É muito simples:

Se você ocultou a sidebar, você precisará re-definir o tamanho em pixels da área total do template (#main-wrapper) e a área total da postagem (.post ). Por exemplo, a área total do meu template é 800 pixels, todo o meu template está em 800 pixels, então eu vou mostrar para o código acima, que minha área total é essa. E como eu já mostrei para o código que a minha área total é essa, temos também que re-definir a área de postagem. Se sua área total é 800 pixels, ´re preferível que você diminua 100 pixels para definir á nova área da postagem, ou seja, se minha área total é 800 pixels, a minha área de postagem será 700 pixels pois eu diminui 100 pixels para poder definir corretamente a área de postagem do template. Normalmente diminuindo 100 pixels dá certo, mas pode acontecer de seu template pedir que você mude os valores, mas é fato, você terá sempre que diminuir algum valor da área de postagem, a área de postagem nunca deverá ser maior ou igual á área total do template. Se isso acontecer, você verá que seu template começará a ficar desalinhado.

É isso!

E o leitor, já está preparado para aplicar os estilos às suas páginas estáticas?

Bella Felix

facebooktwitterlinkedin

Cursando Design Gráfico, blogueira, pseudo-escritora, viciada em RPG e animes, desenha e devora livros. Autora dos blogs Pink Skull Design e The Black Element.