Trabalhar pela Internet: Como ter Sucesso e Ganhar Dinheiro Online
Criar Caixa de Pesquisa para Sites e Blogs - Busca Interna no Blog
Acessórios do Facebook para Usar no BloggerNa explicação usarei varias vezes {..........} isso quer dizer que tem alguns códigos que não teria utilidade colocar aqui pois isso muda para cada modelo de blog, mas o procedimento para alterar qualquer um deles é o mesmo, clique e veja um exemplo de sidebar na pagina editar html.
Depois que salvar uma cópia do modelo vamos colocar a terceira coluna no blog, na página editar html procure onde está #sidebar{.........} e logo abaixo coloque:
#newsidebar-wrapper {
background-color: #cccccc;
width: 170px;
float: left;
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 */
}
A linha background-color:#cccccc; serve para colocar um fundo cinza na nova coluna, isso é somente para ficar mais fácil visualizar e acertar a largura dela, depois apague essa linha e a cor cinza desaparece. Quando falei acertar a largura estou me referindo a largura de cada coluna(essa que estamos criando e a que já existia), a largura das postagens também a largura total do blog. Para acertar isso olhe os seguintes códigos, o primeiro (760px) é a largura total do blog, 400px(largura das postagens) e 150px(largura da coluna que já existia no blog):
#content-wrapper {
width: 760px;
#main-wrapper {
width: 400px;
#sidebar-wrapper {
width: 150px;
Você precisa ajustar os valores para que a soma das duas colunas(sidebar-wrapper, e a que estamos fazendo agora) e da postagem(main-wrapper) seja menor que a largura total do blog(content-wrapper). Não deixe uma conta exata pois existem padding e margin que são espaços vazios nas margens e não estão incluídos nos valores. Portanto se quando visualizar seu blog as 2 colunas e a postagem não ficarem uma do lado da outra diminua um pouco o valor das colunas e postagem ou aumente a largura do blog. Mas antes de visualizar o blog precisamos colocar a segunda parte do código.
Agora procure por:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
</b:section>
</div>
Então copie a segunda parte<div id='sidebar-wrapper'> fazendo as alterações para a nova coluna
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='novabarra' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
Note que alterei as partes em negrito(newsidebar e novabarra). Depois de fazer essas mudanças coloque isso antes do techo acima. Outra coisa indispensável para isso funcionar é colocar alguma coisa que já existia no seu blog nesta nova coluna, foi o que fiz com a linha <b:widget id="HTML2" locked="false" title=""
type="HTML">, mas lembre-se de apagar essa linha na coluna antiga. Mas não se preocupe esta linha não for exatamente igual pois à parte HTML2 depende de quantas coisas você tem no blog, o importante é copiar uma linha para a nova coluna senão criaremos uma coluna vazia e ficará difícil visualizar.
Portanto esse trecho ficará assim:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='novabarra' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
</b:section>
</div>
Depois de feito tudo isto é só salvar e pronto já conseguimos adicionar uma nova coluna ao blog. Se você agora remova a linha background-color: #cccccc; para tirar o fundo cinza da nova coluna pois como falei no inicio ela só servia para ficar mais fácil a visualização. As outras alterações como colocar mais coisas na nova coluna pode ser feito pela página modelo adicionando elementos de pagina do mesmo modo que da outra coluna que já existia no blog. Se ainda tiver alguma duvida veja nosso outro tutorial sobre colocar mais uma coluna no blog.
Veja também:
Como Ajustar a largura e espaços entre as colunas
Colocar fundo degrade no blog
Como conseguir mais visitas
