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.

Recomendamos também

7 comentários:

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

    ResponderExcluir
    Respostas
    1. 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

      Excluir
  2. Respostas
    1. 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

      Excluir
    2. Assim?

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

      Não mudou em nada

      Excluir
    3. A página em si que eu quero que fique centralizada

      Excluir
    4. 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?

      Excluir