Icones: OFF: http://www.merrypic.com/files/jlvjequcwpg0s8lzcljr.ico http://www.iconj.com/ico/8/g/8gulktd3sd.ico OFF: http://www.imageboo.com/files/7jrisja3pe8b18nbdcsj.ico Circuito Rede Cerebral: Blog - 3 Colunas
quinta-feira, 13 de agosto de 2009

Blog - 3 Colunas

Estou usando o Templante Minima Black, mas se estiver usando outro, procure os códigos similares no HTML de Edição.
Para adicionar outra coluna em seu Blog não é necessário ter conhecimento de códigos para web, basta seguir corretamente os as instruções abaixo.
Comece baixando seu modelo de templante caso não gostar do resultado final. Para isso vá até Layout, Editar HTML e baixe em Baixar modelo completo.
Dentre os códigos de Editar Modelo, localize os códigos de coluna, os wrappers ou outer-wrapper
O Outer-wrapper é o { } (conjunto) de dados que controla o espaço total do Blog. Main-wrapper é o { } de dados que controla a coluna de postagens. E o Sidebar-wrapper é um conjunto que controla a coluna lateral
Adiantando algumas informações, é muito importante ter uma orientação de lugar dos códigos no Editor, pois a sequencia dos códigos define a posição e ordem que serão exibidas no Blog.
Antes de inserir novos códigos, edite o Outer-wrapper:
#outer-wrapper { /* Código, abrir conjunto */
width: 790px; /* Dimenção de largura do Blog para visualização padrão-tela 800x600 */
margin:0 auto; /* Margem configurada para auto ajustar as palavras */
text-align:$startSide; /* Alinhamento de texto no inicio do Blog */
font: $bodyfont; /* Configuração de fonte padrão */
} /* Código, fechar conjunto */
Note que o código de padding, código de espaço entre colunas, foi removido. Isso foi feito para dar mais espaço às colunas laterais e de postagem.
Em seguida, insira os códigos da primeira coluna, ou seja, a nova coluna:
#newsidebar-wrapper { /* Código, abrir conjunto */
width: 170px; /* Dimenção de largura da nova coluna */
padding: 5px; /* Dimenção de espaço entre colunas */
float: left; /* Elevação de conteúdo da nova coluna à esquerda */
word-wrap: break-word; /* Ajuste de quebra de linha para IE */
overflow: hidden; /* Ajuste de espaço sem texto para IE */
} /* Código, fechar conjunto */
Agora edite o Main-wrapper:
#main-wrapper {
width: 400px;
float: $startSide;
/* Elevação de conteúdo pelo inicio da coluna */

padding: 5px;
word-wrap: break-word;
/* Ajuste de quebra de linha para IE */

overflow: hidden; /* Ajuste de espaço sem texto para IE */
}
Logo em seguida, edite o Sidebar-wrapper:
#sidebar-wrapper {
width: 190px;
float: $endSide;
/* Elevação de conteúdo pelo fim da coluna */

padding: 5px;
word-wrap: break-word;
/* Ajuste de quebra de linha para IE */

overflow: hidden; /* Ajuste de espaço sem texto para IE */
}
O espaço para as 3 colunas está feito. Mas não possui Gadget, itens para a nova coluna.
Para adicionar Gadget, localiz os cógidos de corpo, body, no final da caixa de edição com os códigos. Veja que são códigos em div id.
São eles quem vão determinar a ordem do conteúdo na página do Blog, como havia mencionado acima. Agora acrescente os códigos de div id='newsidebar-wrapper' entre os códigos div id='crosscol-wrapper' e div id='main-wrapper'
Agora Salve esse Modelo e vá para Layout, Elementos da página, e é só Adicionar um Gadget à nova coluna.


Backgrounds (BG)

Acesse a postagem Backgrounds (BG).Com esses 4 conjunto é possível criar excelentes BG. Para coloca uma imagem ou cor como plano fundo no seu Blog, vá para a Layout, Editar HTML e procure pelo código body { ou pelo código #outer-wrapper {.
Agora é só fazer as combinações: Imagem + Repetição + Posição, e ainda poderá acrescentar o código de Fixação



5 comentários:

Fábio disse...

Amigo,
Vlw, ajudou muito!

Mundo Engraçado disse...

vlw vei
essa sim foi uma boa dica
são 00:33, agora vou durmir, vc ajudou
hauhauy
flw velho

ahhh esse blog que vai aparecer pra vc seguir eh so um blog de teste
flw

Teste disse...

Ola. Legal sua página, muito bonita e criativa...

Sou bastante leiga nisso tudo... esse meu blog é somente para teste, pois estraguei um outro e estou procurando um meio de arrumá-lo.

Por favor dê uma olhada nesse meu blog de teste... acho q fiz algo errado.
Pode me ajudar?

abçs

Di
teste: testevalhalla.blogspot.com
"burrada de que fiz": divalhalla.blogspot.com
e-mail: testevalhalla@gmail.com

Circuito disse...

Bom amigo, seu blog de testes está intácto:

- 2 Colunas

- Nenhuma postagem



Antes de iniciar, crie uma postagem de teste!



Para alterar, passando seu blog para 3 colunas é fácil!

1º Passo

- Acessar o Editor HTML do seu Blog.



2º Passo

- Baixar Modelo Completo do seu Blog.



3º Passo

- Acrescentar uma nova coluna (newsidebar).



/* Código do Conjunto New SideBar*/

#newsidebar-wrapper {
width: 220px;
padding: 5px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}


Atenção: Outer-wrapper é um espaço TOTAL. Dentro dele estarão as 3 colunas: NewSideBar - Main - SideBar. A ordem na qual estarão influenciarão a posição das Colunas no Blog. Por isso, organise os códigos de acordo com o que esperá de resultado final.



Para facilitar o entendimento (a inteleção), imagene que Outer sejá uma caixa, dentro dela vc vai colocar outras 3 caixa: newsidebar, main, sidebar. Do mesmo jeito deve ficar os códigos. Vc escolhe a posição de cada caixa dentro da caixa maior.



Porém vc terá que alterar o tamanho da "Caixa Maior" (Outer).

O ideal seria:

Outer-wrapper com width (largura) igual a 980px (pixels);

Newsidebar-wrapper com width (largura) igual a 220px (pixels);

Main-wrapper com width igual a 510px;

Sidebar-wrapper com width igual a 220px;



Caso tenha notado, 220 + 510 + 220 = 950 e não 980. Por que?

Simples! exatamente porque haverá espaços entre as paredes de cada caixa. Caso contrario parecerá uma tabela, e não colunas.



Os código que controlam os espaçamentos entre colunas são chamados de "padding". Assim, para alterar o espaço entre colunas é só alterar o valor (número) do padding.



Outra coisa importante é o float. Float é a flutuação/encaixe da coluna dentro da "Caixa Maior". Assim, altere o valor de float de cada coluna para $startSide. faça isso em Newsidebar, Main e Sidebar.





4º Passo

- Inserir controlado de Widget.

Adicione o código abaixo acima dos códigos de widget da coluna Main.

Obs.: Para encontrar qualquer código na página de Edição precione as teclas Ctrl + F. Depois digite a palavra que procaura. No caso, procure pelo código <div id='main-wrapper'> e adicone o este código abaixo antes desse código de main-wrapper.



<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='novabarra' preferred='yes'>
</b:section>
</div>



Atenção: O mesmo que ocorreu com os códigos anteriores acontecerão agora. Esse código refere-se ao código de widget da Newsidebar. Se vc colocou os códigos de posição na ordem: Newsidebar - Main - Sidebar. Então os códigos de Widget devem estar nas mesmas posições:



<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='novabarra' preferred='yes'>
<b:widget.../>
</b:section>
</div>



<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget.../>
</b:section>
</div>


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget.../>
</div>


Obs.: No lungar de <b:widget.../> estrão os Widget que serão colocado através da guia Elemantos da Página.



5º Passo

- Salvar Modelo



6º Passo

- Acessar Elementos da página.



Agora é só adicionar novos Widgets.

Teste disse...

Obrigada pela resposta. Ainda não fiz as mudanças (pois quero ler direitinho. Mas agradeço sua pronta resposta.

Obrigada e mais uma vez: parabéns.

Di

Postar um comentário

 
Subir