quarta-feira, 17 de fevereiro de 2010

Adicionando LeftSideBar Ao Template Do Blogger Minima Template

Webmaster Tools Ajuda Blogger Help Dicas Tips & Trics Tutorial Ensinando Como Colocar coluna à Esquerda no Template Minima do Blogger

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.

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.