Adicionar nova Barra Lateral ao Blog Nova Sidebar Coluna
Uma pergunta recorrente aqui no [ Ferramentas Blog ] � como fazer certas modifica��es no template, como adicionar uma nova sidebar (barra lateral). Mexer no c�digo-fonte de um template requer alguns cuidados e muita aten��o, mas � relativamente f�cil. Vou mostrar aqui como voc� poder� adicionar uma outra sidebar ao seu blog e fazer pequenas modifica��es na posi��o da barra lateral para personalizar o seu blog.
Passos iniciais.
- Antes de fazer qualquer modifica��o no seu modelo de layout, tenha um backup para poder recuperar de poss�veis erros - Backup no Blogger � seu Blog seguro.
- Sempre que desejar aprender algo novo para o seu blog que tenha de mexer no c�digo-fonte, fa�a testes antes em um blog alternativo. Crie um blog s� para fazer testes e aplicar as modifica��es em seu blog principal apenas quando tiver certeza de que tudo dar� certo.
- Entenda as medidas do layout de um template. Sem conhecer e saber como modificar as dimens�es do blog � imposs�vel aprender como adicionar uma sidebar - Medidas de um Template do Blogger.
- Se voc� quiser trocar a Barra sidebar de um lado para outro (ser� �til para esse tutorial tamb�m) veja o seguinte artigo: Trocar sidebar de lado. J� que vamos adicionar uma nova barra lateral, pode ser �til saber como trocar os lados.
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.
1. Definindo a Largura total.
Se amos adicionar um novo elemento ao template, siginifica que vamos precisar de mais espa�o para ele. Cada template tem uma medida de largura e suas partes t�m medidas definidas certas para o espa�o que v�o ocupar. Assim ou se diminui alguma parte ou aumentamos tudo para o que ser� colocado de novo.
V� no menu e clique em �Layout� ~> �Editar HTML� e procure pela seguinte linha:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Essa � a parte que define a largura de um template. No caso, o que temos destacado de vermelho � a largura total do template, equivalente a 660px. Logo abaixo dessa parte voc� ver�:
#main-wrapper {
width: 410px;
float: $startSide;
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 */
}
Que � a parte que define a largura das postagens no Blog, no caso com 410px. Em seguida h� o c�digo referente � barra lateral:
#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 */
}
2. Adicionando os c�digos da nova Sidebar.
Vamos precisar de dois c�digos para adicionar uma nova sidebar e o primeiro � duplicando o que j� existe. Nesse caso a barra lateral tem 220px e esse c�digo � que vamos usar para duplicar a barra lateral. Ser� preciso unicamente copiar esse c�digo e colar logo abaixo, da seguinte forma:
#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 */
}
#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 */
}
Veja que a parte verde � a duplica��o, a c�pia sem modifica��es da barra lateral original. Ao repetirmos o c�digo estamos definindo que teremos uma nova barra lateral com aquelas caracter�sticas. � preciso dar um novo nome, como no exemplo usamos �#sidebar-wrapper-nova�.
Se adicionamos mais 220px na largura desse template, ent�o ser� preciso adicionar esse valor nas medidas de largura total do Blog, no cabe�alho e no roda-p� para ficar tudo proporcional. Se antes media 660px, agora mede 880px. Por isso indicamos previamente a leitura do artigo �Medidas de um Template do Blogger�.
Para adicionar definitivamente a nova barra, ser� preciso um �ltimo passo. Role o c�digo-fonte at� encontrar o seguinte:
<div id=sidebar-wrapper>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.
<b:section class=sidebar id=sidebar preferred=yes>
����
����
</b:section>
</div>
Esse � o c�digo que diz que h� uma sidebar nessa parte. Para aparecer a nova barra que queremos, ent�o duplique esse c�digo tamb�m, exatamente como aparece em seu c�digo-fonte, sem o que estiver dentro dele (aqui representado pelos pontinhos), colando logo abaixo do primeiro e modifique o que est� indicado de vermelho:
<div id=sidebar-wrapper-nova>Note que �sidebar-wrapper-nova� � o mesmo nome que demos ao primeiro c�digo que duplicamos (� preciso que seja o mesmo nome.
<b:section class=sidebar id=sidebar-nova preferred=yes>
</b:section>
</div>
E a ID desse elemento novo tem que ter um nome diferente tamb�m, aqui chamado de �id:sidebar-nova�.
Salve o modelo e veja o resultado em seu blog. Essa barra ser� adicionada entre as postagens e a sidebar antiga. Voc� pode modificar as medidas delas como achar mais conveniente, sempre observando as propor��es totais e os valores e medidas de outras partes.
Para conseguir mudar a posi��o da sidebar, veja o artigo que indicamos (Trocar sidebar de lado) para saber como proceder. Como j� dissemos, fa�a testes, use um modelo de template alternativo e tenha um blog de testes com o seu template para ver previamente como ficaria o resultado.
Cada template tem caracter�sticas pr�prias e quando t�m figuras e imagens de fundo � preciso mais aten��o, ter� que duplicar imagens e entender como o criador pensou o original. Tenha paci�ncia e seja persistente.