13 de maio de 2016

Como ocultar a sidebar nas páginas estáticas do Blogger


Oque é uma página estática?

Páginas estáticas são aquelas que você cria no menu Páginas > Nova Pagina, elas servem na maioria das vezes como contato, formulário para anuncio ou parceria. É muito utilizado para esses fins e não seria nada mal a gente dar um toque diferente nela certo?

Pensando nisso, desenvolvemos um código para ocultar a sidebar dessas páginas e deixar elas com a coluna preenchendo todo o layout, que acaba passando mais profissionalismo.

O código para fazer isso é bem simples e rápido! Por isso esse post será bem curto :).

Basta você ir em Modelo > Editor de HTML e procurar por </head> e acima dele cole:
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#main-wrapper{width: 100%; float:none; margin: 0 auto;}
.main-wrapper{width: 100%; float:none; margin: 0 auto;}
.post{width: 100%;margin: 0 auto;}
.sidebar {display:none;}
.sidebar-wrapper {display:none;}
#sidebar {display:none;}
#sidebar-wrapper {display:none;}
</style></b:if>
Pronto, agora acesse alguma página do seu blog que verá o efeito. O mesmo código é usado aqui no Códigos Blogger, acesse essa página e veja que a sidebar do nosso blog some :).

Caso não tenha funcionado, deixe um comentário com o link do seu blog para eu analisar e enviar o código correto para o mesmo.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

19 comentários

Ebrahim, funcionou perfeitamente, valew. Mas, tem como deixar uma página de exceção?

Olá David!

Não posso afirmar isso, mas tente fazendo a seguinte modificação no código:

Em <b:if cond='data:blog.pageType == "static_page"'> troque por: <b:if cond='data:blog.url == "URL-DA-PAGINA"'>

Em URL-DA-PAGINA você colocar o endereço da página em que quer ocultar.

Qualquer dúvida estou a disposição.
Abs

Olá Caroline,

O que você quer centralizar, os textos?

Se for é só adicionar um text-align:center no main-wrapper

Qualquer dúvida estou a disposição.
Abs

Assim?

#main-wrapper{width: 100%; float:none; margin: 0 auto;text-align:center;}

Não mudou em nada

A página em si que eu quero que fique centralizada

A página em si então o text-align não funciona mesmo.. mas é estranho, pois era para centralizar! Você pode passar o endereço do site e da página em que não fica centralizado pra eu dar uma olhada?

como eu alterar o tamanho do post?

Olá Salo,

Não entendi a sua dúvida, pode esclarecer melhor?

Abs

Não funcionou no meu blog. https://sonhos-acordado.blogspot.com.br/

Olá Flavio,

Você quer ocultar a sidebar nas páginas ou postagens?

Aguardo

como eu alterar o tamanho do post? Quero ser maior para cobrir mais espaço publicação

exemplo
https://3.bp.blogspot.com/-Q3mDGTZf1oE/WJUb9aBv8uI/AAAAAAAAA9s/ammZ8PKJ3XEriVtfPz_wwqg0xAsqySHNACLcB/s1600/EJEMPLO.png

Simples, acima de </head> do seu template, cole:
<b:if cond='data:blog.pageType == "item"'>
<style>
#sidebar-wrapper{display:none !important;}
#main-wrapper{max-width: 100% !important;}
</style>
</b:if>

Feito isso, Salve o modelo.

Isso deve resolver o problema, eu já analisei o seu blog e com isso vai funcionar.

Abs

Olá Salo,

Geralmente o tamanho é controlado pelo WIDTH ou MAX-WIDTH no CSS, porém precisa ser analisado melhor a estrutura do código para lhe dar uma resposta mais concreta.

Qual é o blog para eu analisar?

Aguardo

Salo,

Procure por .item #main-wrapper, .static_page #main-wrapper ou .item #main-wrapper,.static_page #main-wrapper em seu template e altere o 850px para o tamanho que deseja.

Ex: 1080px

Abs

Muito obrigado, se ele funciona.

Poderia ver esse também? pq não esta funcionando: http://torcida-alvinegra.blogspot.com/

Flávio,

Por favor peço que siga atentamente os passos que não tem erro. Também se o seu template for personalizado, você precisa verificar como estão as marcações da sidebar e corpo de postagem.

Abs


Abrir lista de emoticonFechar lista de emoticon