Antes de fazer alterações ao Template do Blogger, faça um backup do template.
Vá a Template -> Edit HTML. Click the “Download Full Template” e salve uma copia do template.
Procure pelo código HTML: ( use CTRL F) 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 do código acima:
| #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 este código abaixo:
| #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 os valores que definem o template, para o ajustar ao nosso novo modelo. Troque os valores atuais pelos valores destacados a azul:
| #outer-wrapper { width:980px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #main-wrapper { width:525px; 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 código <div id='main-wrapper'> e cole o código abaixo, imediatamente acima.
| <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div> |
Para retirar a borda do cabeçalho, procure pelo código abaixo e modifique o que está o trecho de forma a ficar como selecionado a azul:
| #header-wrapper { width:980px; 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; |
Agora convém ajustar os valores do footer do template do Blogger.
Procure pelo código abaixo e altere
| #footer { width:980px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; } #footer-column-container { border: .3px dotted #cccccc;} |
Clique em Salvar modelo.
Agora clique em "Layout". Agora já pode adicionar elementos de página (widgets) na nova barra lateral esquerda.
.jpg)
