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:
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 */
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 */
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 */
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 */
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'
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.
Nenhum comentário:
Postar um comentário