Para aqueles que querem fazer modificações no template e personalizar o blog, sempre se busca mais espaço para a barra lateral (sidebar). Gostaria de ensinar aqui como adicionar uma parte da sidebar dividida em duas colunas sem precisar adicionar outra barra lateral extra, aproveitando exatamente o espaço que já se tem. Qualquer modificação em um template é complicada, mas essa oferece um recurso bem interessante é muito útil.
Pedimos que se leia esse artigo com atenção e siga as recomendações à risca. Só faça modificações depois de aprender o funcionamento básico desse recurso. O que mostraremos abaixo modifica permanentemente um template e retroceder pode ser impossível sem um backup.
Passos iniciais.
- Tenha um backup de todo o seu blog: Backup no Blogger – seu Blog seguro
- Antes de aplicar ou tentar qualquer modificação em seu blog, faça em um blog de testes para ver o resultado e aprender previamente, certificando-se de que é o resultado esperado.
- Três artigos são importantes para ajudar a entender o que vamos tratar abaixo e sua leitura prévia é fundamental.
Tudo o que vamos descrever abaixo é como adicionar uma nova sidebar, por isso é importante ao menos ler o artigo citado acima.
Para o que vamos mostrar aqui, tomaremos por padrão o template Minima do Blogger, aquele que quando se inicia um blog já vem incorporado originalmente. Se você clicar no menu “Layout” ~> “Escolher novo modelo” é o primeiro da lista.
O resultado esperado para as mudanças que vamos apresentar.
Queremos adicionar uma coluna dividida junto à coluna original do blog. Assim a sidebar terá mais espaços para elementos e dará mais opções de utilização. Veja na imagem como ficará.
Com isso seu blog terá mais espaços disponíveis e você poderá ter uma coluna lateral (sidebar) mais larga e com um uso mais diverso. Eu particularmente gosto desse formato, pois há gadgets e outros elementos que são bons para colunas largar, mas há outros (como os Marcadores) que é melhor visualizado em uma sidebar mais estreita.
Como adicionar uma Sidebar Dividida.
Precisamos adicionar os códigos CSS que determinam o formato e tipo de elementos que vamos adicionar. Para isso vá ao código-fonte de seu template, abrindo “Layout” ~> “Editar HTML”. Na janela dos códigos procure por:
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Se estiver usando um outro modelo de template para testes que não seja o Minima, então procure por algo similar, mas que começa com “#sidebar-wrapper”, pois é o que determina a barra lateral original.
Exatamente Abaixo dessa parte indicada adicione o seguinte:
#coluna-esquerda {
width: 48%;
float: left;
}#coluna-direita {
width: 48%;
float: right;
}
#sidebar-wrapper-nova {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
O que está indicado de verde refere-se à coluna dividida e as porcentagens determinam o quanto de espaço vão ocupar da largura total da sidebar. Aqui no exemplo a sidebar mede 220px.
No que está destacado de vinho (roxo) é a sidebar duplicada com nome novo e é o que será a continuação abaixo das colunas divididas. Entenda: a continuação é a coluna original duplicada e com um nome novo, para tanto, basca copiar e colar o código da original e tem que ter a mesma medida de largura.
Agora procure pela seguinte parte:
<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
…………
…………
</b:section>Aqui vamos colar os códigos que virão a seguir (isso não pertence ao código e é apenas uma marcação).
</div>
Os pontinhos são apenas ilustrativos e representam qualquer outro código que posso existir entre os códigos mostrados e não têm importância aqui para o q estamos fazendo.
No lugar da marcação em vermelho deverá ser colado o código a seguir que vai inserir as novas colunas. Nessa parte é preciso ter muita atenção para não errar.
<!– SideBar Dividida início –>
<b:section class=’sidebar’ id=’coluna-esquerda’ showaddelement=’yes’>
</b:section><b:section class=’sidebar’ id=’coluna-direita’ showaddelement=’yes’>
</b:section><div style=’clear: both;’/>
<!– SideBar Dividida final –><!– Continuacao da sidebar início –>
<div id=’sidebar-wrapper-nova’>
<b:section class=’sidebar’ id=’sidebar-nova’ preferred=’yes’>
</b:section>
</div>
<!– Continuacao da sidebar final –>
Agora é só salvar o modelo e v
er o resultado.
Espero que tenha ajudado e faça todos os testes possíveis antes de tentar aplicar isso definitivamente em seu blog original. É preciso tempo e paciência para fazer tudo funcionar.
Artigos Relacionados para melhorar seu layout:
- Inserir Menu Horizontal – Linkbar – no seu Blog
- Templates para Blog / Blogger
- Mudar cores e fontes do Layout do Blog
Como a gente faz pra dividir a COnt. da Original?
@Mikael,
Basta duplicar o código que está entre
SideBar Dividida início
…..
SideBar Dividida final
E colocar abaixo de
Continuacao da sidebar final
. Só isso.
OK, obrigado, ainda estou tentando fazer esse que vc explicou no tutorial, ta muito difícil, pq o meu template é diferente e se torna um pouco dificultoso pra encontrar as linhas corretas, mas eu vou continuar tentando.
Valeu!
Só se pode fazer esta modificação se for com esse template ai?
No meu template não tem sidebar-wrapper só tem
sidebar-wrap
Como eu faço?
@Mikael,
Essa modificação pode ser feita em qualquer template. O Minima é apenas o exemplo padrão para ajudar a identificar os elementos em outros templates.
Como é o seu caso agora: "sidebar-wrap" deve ser a mesma coisa. Por isso é importante fazer testes em seu modelo de layout em um blog alternativo antes de testar as mudanças no seu blog original.
Oi Marcos Lemos, vc mandou:
" Basta duplicar o código que está entre
SideBar Dividida início
…..
SideBar Dividida final
E colocar abaixo de
Continuacao da sidebar final
. Só isso.
Eu fiz mas a mensagem que apareceu foi essa:
"Mais de uma seção encontrada com o id: coluna-esquerda. Os IDs de seção devem ser únicos e exclusivos."
Poderia me explicar como devo proceder?
Obrigado!
@Mikael,
Só dê outro ID, mude o nome que funciona.
cara meus parabens
eu fiz isso q vc mandou mais não deu certo, a sidebar não ficou na Cont. da Original não
Reveja os passos pois eu fiz tudo aqui e funcionou perfeitamente.
Brother… valeu mesmo. Eu já tinha a sidebar divida, só faltava a continuação! adaptei a minha necessidade e deu certo!
Cra, tava atrás disso e não tava encontrando! Valeu muito! Meu Salvador da Pátria!
Parabéns, ótimo blog!
Olá Marcos tudo bem?
Tem como adicionar essas colunas em um template da Ju, do DB? Não consigo de jeito nenhum!
@Maicon,
Tem jeito sim.
Mas como eu disse no artigo, é preciso aprender bem como fazer e testar. Uso aqui o Minima como modelo padrão.
Para usar em outros templates vc terá que criar um blog de testes e aprender as particularidades dele antes de aplicar em seu blog principal.
Muito obrigada!
Super bem explicado! Entendi tudo perfeitamente e consegui aplicar no meu Blog!
E o Post sobre as Medidas de um Template do Blogger, me ajudou demais também! Aprendi a customizar o as larguras.. E ficou show!
Parabéns! =)
Oi, eu postei um comentário, mas parece que ele foi negado! ôõ
Então, eu consegui dividir tudo certinho, mas a continução da "primeira" sidebar (a maior) fica meio que centralizada e acaba não aparecendo. Como eu resolvo isso?
Olha o print: http://i36.tinypic.com/2gwyq0n.jpg
Agradeço a paciência e o tutorial.
@Armadastyx Team,
Os comentários só são aprovados quando estão de acordo com nossa Políticas para Comentários.
Sobre sua dúvida:
Veja se está colando os códigos no lugar indicado e seguindo os passos do tutorial à risca usando devidamente a sua estrutura.
Recomendo ainda que faça testes em um blog só para testes antes de tentar aplicar isso no seu blog original.
Como disse no texto, seguimos o modelo do template Minima, o que pode variar um pouco conforme outros templates e a estrutura de código. Assim, veja bem como funcionar melhor em seu modelo e, qualquer dívida solicite ajuda do criador de seu template para solucionar questões específicas na mudança.
MUITO BOM MESMO,nao pude deixar de comentar…
Estava procurando umas dicas dessas a tempos!
Parabéns!
Muito bom! Esse tutorial funciono perfeitamente no meu blog tava atrás disso a dias. Ate que achei aqui no Ferramentas Blog. Parabéns Marcos Lemos tutorial muito bem feito. E obrigado pela ajuda como sempre heheh falou.
Cara, há tempos procurava esse recurso para implementar no meu blog, você me salvou, valeu demais…
@jmpsousa
Muito bom seu blog, estou vendo essa e outras demais postagens, você faz um bom trabalho, parabéns.
cara esse seu blog estar de parabens,o codigo pegou sertinh o valeu e continue assim
Funcionou perfeitamente no meu template.
Pingback: Personalizar Links de Navegação do Blogger | [ Ferramentas Blog ]