O Blogger é uma plataforma simples, mas nem sempre nos entrega o layout exatamente como queremos. Um exemplo clássico: páginas estáticas (como "Sobre", "Contato", "Serviços") normalmente herdam a sidebar do blog, deixando o visual poluído.

Se você deseja criar uma página limpa, ocupando 100% da largura da tela (full width), é possível esconder a sidebar com apenas algumas linhas de código.

E a boa notícia é que dá pra fazer isso com apenas algumas linhas de JavaScript + CSS, sem precisar editar cada página individualmente.

Por que usar páginas full width no Blogger?

Foco no conteúdo – sem distrações laterais.
Design mais profissional – ótimo para páginas de apresentação, vendas ou landing pages.
Flexibilidade – você pode personalizar cada página de forma diferente.

Passo 1 – Adicione o Script no seu Tema

Esse script detecta quando a página acessada é uma página estática (contendo /p/ na URL) e adiciona a classe full-width logo acima da tag </body>.



<script>
document.addEventListener("DOMContentLoaded", function() {
  // Qualquer página /p/ fica full-width
  var url = window.location.href.toLowerCase();
  if(url.includes('/p/')) {
    document.body.classList.add('full-width');
  }
});
</script>

Passo 2 – Adicione o CSS para Ajustar o Layout

Agora, basta adicionar esse CSS no seu tema, logo acima da tag </head>. Ele vai esconder a sidebar e expandir o conteúdo principal para ocupar toda a largura da tela.


<style>
/* Full width quando o body tiver a classe full-width */
.full-width #sidebar-wrapper { 
    display: none !important; 
}
.full-width #main-wrapper, 
.full-width .post-body {
    width: 100% !important;
    margin: 0 !important;
}
</style>

Resultado Final 🎉

Qualquer página estática (/p/...) do seu Blogger ficará em largura total.
O conteúdo principal ocupará 100% da tela, sem a sidebar.
Você pode usar isso para criar páginas de captura, vendas, divulgação de ebooks, ou até páginas personalizadas.

👉 Dica extra: combine esse recurso com efeitos visuais (como o efeito neve que já mostramos aqui no Blogueiros United) ou banners exclusivos, e você terá páginas muito mais profissionais dentro do Blogger.

⚠️ Aviso Importante

Antes de aplicar o código, verifique a classe ou ID da sua sidebar.
Cada template do Blogger pode usar nomes diferentes, como:

.sidebar
#sidebar-wrapper
.sidebar-wrap
#sidebar
ou outro nome personalizado.

Se você não ajustar o seletor corretamente, o código não vai esconder a barra lateral.

Como identificar a classe/ID da sidebar no seu blog

Você pode fazer isso facilmente usando a ferramenta Inspecionar do navegador (Chrome, Firefox, Edge).

Passo a passo:

Abra o seu blog no computador.
Entre em qualquer página que exiba a sidebar normalmente.
Clique com o botão direito do mouse sobre a área da sidebar.
Vai aparecer um menu — escolha a opção "Inspecionar" ou "Inspecionar elemento".
O painel de desenvolvedor vai abrir, mostrando o código HTML da página.
A parte correspondente à sidebar ficará destacada.
Olhe para a primeira linha destacada:
Geralmente será algo como:
```
<div id="sidebar-wrapper">
```
ou
```
<aside class="sidebar">
```
Pronto ✅
Copie o valor do id (com #) ou da class (com .) e substitua no CSS que você está usando.

Exemplo:

Se aparecer <div id="sidebar-wrapper">, o seletor no CSS será #sidebar-wrapper
Se aparecer <aside class="sidebar">, o seletor no CSS será .sidebar