Duas colunas, duas Formatações
Autor: Rô Rezende | Publicado: 2008-05-05T13:53:00-03:00

Seu blog tem duas colunas e você quer deixar cada uma com uma "cara" diferente, mas não sabe como?Seus problemas "se acabaram-se"... rsEsse post vai te mostrar como fazer isso e olha que não tem nada de muito complicado, gente!!ATENÇÃO1. Esse tutorial está sendo feito com base no Template Mínima e, segue a idéia de que você já tenha duas colunas (além da dos posts) no seu blog. Talvez o seu blog não esteja com essas definições, se for o caso, entre e contato e veremos o que dá para fazer, ok?2. Usei as definições dadas pela Ariane nesse tutorial dela para adicionar colunas.3. SEMPRE SALVE UMA CÓPIA DE SEGURANÇA DO SEU MODELO ANTES DE MODIFICÁ-LO!Vamos lá!1º Passo - Criar uma nova 'class'Iremos criar uma nova 'class' que será atribuída para a segunda coluna, para começar só colaremos as informações da primeira coluna, ok?Não expanda o modelo de widgets!Procure por esse trecho do seu blog (lembre-se que esse trecho é genérico, no seu blog pode ter algumas diferenças):Copie o que está em negrito e cole embaixo dele mesmo, ficará assim:/* Sidebar Content----------------------------------------------- */.sidebar {  color: $sidebartextcolor;  line-height: 1.5em; }.sidebar ul {  list-style:none;  margin:0 0 0;  padding:0 0 0;}.sidebar li {  margin:0;  padding-top:0;  padding-$endSide:0;  padding-bottom:.25em;  padding-$startSide:15px;  text-indent:-15px;  line-height:1.5em;  }.sidebar .widget, .main .widget {  border-bottom:1px dotted $bordercolor;  margin:0 0 1.5em;  padding:0 0 1.5em; }.main .Blog {  border-bottom-width: 0;}/* Sidebar Content----------------------------------------------- */.sidebar {color: $sidebartextcolor;line-height: 1.5em;}.sidebar ul {list-style:none;margin:0 0 0;padding:0 0 0;}.sidebar li {margin:0;padding-top:0;padding-$endSide:0;padding-bottom:.25em;padding-$startSide:15px;text-indent:-15px;line-height:1.5em;}.sidebar .widget, .main .widget {border-bottom:1px dotted $bordercolor;margin:0 0 1.5em;padding:0 0 1.5em;}.main .Blog {  border-bottom-width: 0;}Perceba o trecho em azul do segundo SIDEBAR CONTENT, ele contem MAIN, é preciso deletá-los para que não haja duas informações sobre o mesmo trecho. Delete apenas o que está em azul, se no seu blog não está assim, siga as alterações como base e muito cuidado.Até agora o segundo SIDEBAR é apenas uma cópia do primeiro, é preciso renomeá-lo para criar a nova 'class', eu usarei NEWSIDEBAR. Todo lugar que tiver SIDEBAR (apenas do trecho colado, gente) coloque NEWSIDEBAR. Ficará assim:/* Sidebar Content----------------------------------------------- */.sidebar {  color: $sidebartextcolor;  line-height: 1.5em; }.sidebar ul {  list-style:none;  margin:0 0 0;  padding:0 0 0;}.sidebar li {  margin:0;  padding-top:0;  padding-$endSide:0;  padding-bottom:.25em;  padding-$startSide:15px;  text-indent:-15px;  line-height:1.5em;  }.sidebar .widget, .main .widget {  border-bottom:1px dotted $bordercolor;  margin:0 0 1.5em;  padding:0 0 1.5em; }.main .Blog {  border-bottom-width: 0;}/* NewSidebar Content----------------------------------------------- */.newsidebar {color: $sidebartextcolor;line-height: 1.5em;}.newsidebar ul {list-style:none;margin:0 0 0;padding:0 0 0;}.newsidebar li {margin:0;padding-top:0;padding-$endSide:0;padding-bottom:.25em;padding-$startSide:15px;text-indent:-15px;line-height:1.5em;}.newsidebar .widget {border-bottom:1px dotted $bordercolor;margin:0 0 1.5em;padding:0 0 1.5em;}Pronto, já temos uma nova 'class'. Salve o modelo.2º Passo - Atribuir a 'nova class' para a segunda colunaNão expanda o modelos widgets!Procure por esse trecho:&lt;div id='newsidebar-wrapper'&gt;&lt;b:section class='sidebar' id='newsidebar' preferred='yes'/&gt;&lt;/div&gt;Esse é o trecho da segunda coluna, no seu template a id (o que está em azul) pode estar diferente. Perceba o que está em negrito, é esse o nome da 'class' a qual pertence a coluna, mude-o para o nome da 'class' que criamos! Eu coloquei 'newsidebar' e é isso que colocarei lá:Ficará assim:&lt;div id='newsidebar-wrapper'&gt;&lt;b:section class='newsidebar' id='newsidebar' preferred='yes'/&gt;&lt;/div&gt;Visualize seu blog e veja se está tudo certo.Lembre-se que ainda nada foi modificado na segunda class, logo as duas colunas continuam idênticas. Se não houver nenhum problema, salve o modelo e agora é de personalizar. Se você não sabe como fazer, use esse post!DICASuas colunas estão tortas e deformando o template? Use esse tutorial  (também da Ariane) e alinhe-as!