Se você quiser usar um template com a sua cara, poderá customizá-lo a partir de um modelo Mínima, que já está disponível no Blogger. O original, do Douglas Bowman, vem com 2 colunas mas, você poderá transformá-lo em um modelo de 3 colunas.
Se estiver começando um blog e usando o Mínima, esta mudança não afetará o seu conteúdo, seus widgets. Mas, se estiver usando um template diferente, personalizado, deverá salvá-los, antes de prosseguir com a instalação de uma nova coluna.
Então, antes de editar ou alterar modelo, faça o backup de seu modelo atual e salve seus widgets.Feito isso, podemos começar:
Vá para o Painel e clique em >>Editar HTML.Agora, encontre este trecho, no código HTML: ( use CTRL F , cole o código e clique em PRÓXIMO ou LOCALIZAR)
| #sidebar-wrapper { width: 220px; float: right; 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 */ } |
Copie o código abaixo e cole logo abaixo:
| #left-sidebar-wrapper { width: 200px; 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 */ } |
Use a barra de rolagem para cima e encontre este código:
| #main-wrapper { width: 410px; margin-left: 25px; 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 */ } |
Adicione o trecho em vermelho.
Agora, vamos ajustar alguns valores, para adequar ao novo modelo. Troque os valores atuais pelos que estão destacados em azul:
| #outer-wrapper { width: 880px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #main-wrapper { width: 425px; margin-left: 25px; 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 */ } #sidebar-wrapper { width: 200px; 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 */ } #left-sidebar-wrapper { width: 200px; 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 */ } |
Procure pelo trecho <div id='main-wrapper'> e cole o seguinte código, imediatamente acima dele.
| <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div> |
Para retirar a borda do cabeçalho, procure pelo trecho abaixo e modifique o que está destacado em azul:
| #header-wrapper { width:880px; margin:0 auto 10px; border:0px solid $bordercolor; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header { margin: 5px; border: 0px solid $bordercolor; text-align: center; color:$pagetitlecolor; |
Clique em Salvar modelo.
Agora clique na guia "Layout". Você vai precisar de arrastar alguns de seus elementos (widgets) da lateral direita para a barra lateral esquerda. Clique em visualizar e se estiver tudo certinho, como você quer, clique em SALVAR.
Veja um exemplo do modelo que fiz, para testar este tutorial: Mínima 3 Colunas
Se quiser retirar o navbar, que fica no topo do seu layout, leia: Navbar do Blogger
