"Para usar um template personalizado, customize-o,
a partir de um modelo ,
no caso, o template Mínima, que já tem no Blogger. O original, do Douglas Bowman, vem com 2 colunas mas, pode-se
transformá-lo em 3 colunas. E, se estiver iniciando um blog e utilizando o " Mínima", em nada afetará esta mudança no seu conteúdo, seus widgets, etc."
"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)"
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
e cole o seguinte código, imediatamente acima dele."
"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"
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
e
cole o seguinte código, imediatamente acima dele.
Para retirar a borda do cabeçalho, procure pelo trecho abaixo e modifique o que está destacado em azul:
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
cole o seguinte código, imediatamente acima dele.
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
0 comentários:
Postar um comentário
Deixe teu comentário aqui e volte para ler a resposta. Caso deseje deixar seu e-mail e enviar sua dúvida em private, escreva para hhylenny@hotmail.com
Grata desde já,
edilene-amor