Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

27 outubro 2010

Como ocultar a sidebar na home do blogger

Não é de hoje (não mesmo) que tento encontrar uma maneira de esconder a sidebar da home no Blogger. Minhas tentativas se iniciaram meses atrás, buscando por tutoriais, scripts e macetes. A única coisa que encontrei sobre o assunto era como esconder determinados widgets da home (ou de qualquer outra página), como explicam os tutoriais dos seguintes blogs (dentre muitos outros):

Templates e Acessórios
IceBreaker
UsuarioCompulsivo
MundoBlogger
Bloggersphera

Mas não era isso que eu queria. O que eu queria era que toda a sidebar ficasse oculta apenas na home, aparecendo nas páginas internas normalmente, ao lado da postagem. Deixei de converter muitos temas do wordpress para o blogger por não encontrar maneira de fazer isso. Hoje, enfim, descobri como.

Para que vocês entendam a dificuldade, se eu optava em colocar toda a sidebar dentro de uma condicional que determinasse que ela não deveria aparecer na home, ela realmente não aparecia, porém, também não aparecia na página 'Elementos de Página' e ai não havia como incluir, excluir, movimentar widgets. Não me adiantava nada lançar um template que impedisse os usuários de colocarem widgets na sidebar.



Hoje, conversando no twitter sobre o assunto, a Iara (@iarana)  me apontou um template que tem esta caracteristica: a sidebar aparece apenas nas páginas internas. Instalei o template e constatei que o problema também se apresentava: a sidebar havia sumido da página 'Elementos de Página', inutilizando, de certa forma, a coluna.

Bom, resumindo a novela, continuei insistindo no assunto hoje, por que estou trabalhando para converter este template do Wordpress para o Blogger (note que toda a home é ocupada por resumos de postagens e quando se clica em Style no menu, tendo acesso ao post completo, a sidebar aparece.), e finamente encontrei uma solução bastante simples:

Como retirar a sidebar da home do blog

Primeiro é preciso usar uma condicional. Após a tag ]]></b:skin> coloque o seguinte trecho:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#sidebar-wrapper{display:none}
</style>
</b:if>

Traduzindo em miúdos, determinei que a sidebar não apareça (display:none) se a condição for a página principal do blog (homepage).

Visualize e note que a sidebar realmente desaparece da home do blogger. Agora vá a página 'Elementos de Página' e veja que a sidebar não aparece ali.
Volte ao código do seu template e antes de body{ (logo no começo dos códigos CSS)  acrescente o trecho:

body#layout  #sidebar-wrapper{display:block;margin:0px;float:right;}

Salve e torne a visitar a página 'Elementos de Página'. Veja que a sidebar reapareceu e ainda assim, não aparece na home do blogger, apenas nas páginas internas. 
body#layout é o código para modificar a estrutura da página 'elementos de página', como já publiquei aqui.



Testei no Firefox, Chrome e IE8.

Meus agradecimentos aos meus amigos do Twitter que tentaram hoje me ajudar :)

Artigos Relacionados

27 comentários:

Tiago Mercuri disse...

Parabéns Ariane, a sua insistência valeu apena então. Engraçado que depois de achar a solução, tudo parece muito simples. Agora como seria para ocultar toda a sidebar apenas nas páginas internas, e aparecer na home? Basta mudar a condicional?

Bruno disse...

Boa noite, Ariane.

Estou com dificuldades de reconfigurar minha página por causa do "Tinypic".

Será que você poderia me ajudar?

me manda um e-mail pra eu te passar o que precisa.

strickfla@gmail.com

Muito obrigado pela atenção!

Paulo Estevão disse...

Nossa, que simples de se resolver! =]
Valeu a luta Ariane. Mais uma "missão" cumprida! hehehe
Abraços

Anônimo disse...

Ariane!
Sua descoberta caiu do céu! :)
Também estava com esse problema mas no meu caso cada vez que precisava editar algum widget que estava na sidebar oculta eu movia ele via HTML, editava e voltava ele para a sidebar oculta...mó trabalhão! hehehe

Super obrigado por compartilhar!

The Boss disse...

=DDDDDDDDDD

Max Martins disse...

Oi, Ariane!

Dia desses estava pensando em mudar a cara do meu blog e pra deixar como imaginei, precisaria descobrir isso. Com esse tutorial já tenho 80% do caminho andado. Valeu mesmo por compartilhar.

Ainda vou ter que ler bastante para completar os 100%, mas é assim mesmo, né? O teu exemplo incentiva bastante quem quer aprender.

Parabéns pela persistência, pela descoberta e pelo tutorial.

Abraços

Unknown disse...

Você é mesmo espetacular nesse assunto. Te admiro muito.

Parabéns Hacker (no bom sentido) endiabrada! :-)

MamaNunes disse...

Haaaaaaa!!!!! Num falei? kkkkkkk É mais um caso de display:none!!! Santa teacher!!!

Beijooo

João Alvarenga disse...

Sempre quis saber isso também. Parabéns e obrigado por compartilhar.

Caio Ranieri disse...

Engraçado é que eu descobri isso só lendo o código do template e fuaçando um pouco e, é claro, usando a ajuda do blogger, que explica detalhadamente como funciona o código dos templates. Da mesma forma, fiz uma widget de páginas que destacava o link da página atual meses antes do blogger ter este recurso. Isso tudo foi há mais de um ano. Se eu soubesse que você queria fazer isso teria te ajudado.

.: Moça Arteira - Dani Pimenta :. disse...

Obrigada, Ariane!!!

Anônimo disse...

super vlw, é bom para minipost

Danilo Fênix disse...

Nossa, muito legal essa dica!
Vai ajudar bastante a galera, principalmente quem vive trocando os widgets!!!

Valeu!

Anônimo disse...

Ótima notícia.
Parabéns pela descoberta e paciência.

Jess M. disse...

Olá Ariane! Admiro muito o seu trabalho, mas apesar disso, preciso dizer que comprovei os comentários que sempre ouvi a respeito desse tutorial: Não dá certo!
Tentei e continuo tentando, mas a sidebar nunca fica oculta da página inicial.

Poderia me ajudar?

Aguardo, abraços.

rlaky disse...

Gostaria de tirar a side bar não da página inicial mas sim de outra das minhas páginas é possivel?
Muito Obrigado
E parabéns pelo blog tem sido de muito ajuda!
www.diariodeoperacoes.com

José Mairena disse...

Oi, Ariane!

Por favor gostaria de saber com e possivel ocultar widgets em
certas paginas quando estes estejem conforme exemplo abaixo :









no caso acima estou tentando ocultar "Image".


Obrigado.

Anônimo disse...

Oi Ariane, sou Flávio, eu gostaria de saber, como faço para adicionar um slide de notícias que fia em cima das postagens do blog! Eu não sei como se chama, apenas vi em outros blogs e adoreei. Você pode me ajudar? Agradeço desde já!
Se souber pode postar a resposta em um comentário aqui mesmo!
Valeu!

Micarla disse...

Boa noite Ariane,queria saber como ocultar a sidebar e aumentar a largura da pagina estática do blog.Tem algum tutorial aqui ensinando isso?Te agradeço.

NewDyGo disse...

Olá Ariane estou com um probleminha aqui no meu blog.

Você ensinou como sumir com a side bar da home do blog,

mas o que eu preciso é fazer uma página praticamente em branco aonde eu possa tabular conforme meu gadget da área de trabalho para buscar informação lá.

será que isso é possível de se fazer?

obrigado

Matsui disse...

Awesome Ariane!!!
Mas foi estranho so adicionei a condicional,nw precisei voltar no CSS e adicionar akele outro codigo...
U rock girl!!!

Mae Bonita disse...

Poxa no meu nw deu certo
o meu layout baguncou td e mudou a cor do fundo depois de adicionar o codigo CSS

Mae Bonita disse...

Ariane kerida,como eu ja tinha salvo o template antes de fazer essa tal de manutencao do blog a 2 dias atras,fui la novamente e restaurei,muito obrigado kerida dessa vc deu certo...percebi ke depois da mnautencao do blog,ele baguncou com o template inteiro,e agora acho ke tem gente ke vai ter ke fazer atualizacoes de novo mechendo nos codigos...

Anônimo disse...

A melhor forma de fazer isso sem encostar no HTMl e dor de cabeça é ir no "Design do modelo">"Avançado">"Adicionar CSS" e por o codigo:

#navbar-iframe { height:0px; display:none; visibility:hidden; }

Anônimo disse...

Também estava co o mesmo problema!

Coloquei a condicional do MundoBlogger para não aparecer a sidebar na home mas sumia nos elementos, tentei encontrar algum modo de arrumar isso, infelizmente não consegui, então resolvi apelar!

Fui pesquisar no Google e você apareceu, muito obrigado!!!

Fray disse...

Oi Ariane, fiz todos os passos, mas não consegui fazer com que os elementos aparecessem em "layout", porque o código está sem condicional, então fica aparecendo na home como o código todo.

Tentei reverter tudo e fiz upload do arquivo que tinha salvo antes de modificar o template, mas continua sem aparecer em elementos de página. O que faço??? Por favor me ajuda!!! Acho que perdi meu template :`-(

Ariane disse...

Renata, preciso ver seu blog para encontrar o erro, posta o link dele pra eu dar uma olhada

Postar um comentário

Os comentários são moderados.