Gostou do blog ? então curta nossa página no Facebook:

Colocar mais uma coluna no blog

Se você deseja fazer um blog com três colunas e um pouco complicado mais vamos fazer e sempre bom fazer uma copia do seu template antes de fazer algumas alterações html do seu template. para isso veja este tutorial antes e aprenda como fazer um backup do seu Template.

Estou usando como exemplo do template Minina, entre na pagina editar html e procure por: #header-wrapper, #outer-wrapper e #footer você achando essas três partes você encontrara um trecho assim width:660px; agora você deverá trocar o valor por 980px. Agora no trecho depois de #sidebar{........} coloque isso:

#newsidebar-wrapper {
width: 170px;
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 */
}

Feito isso repare que se no trecho já existe #sidebar a parte float:....; está com a palavra right, caso não te já altere pois dependendo disso as duas colunas podem ficar do mesmo lado do blog.

Agora vamos colocar os estilos CSS que vai definir a largura da coluna, A seguir vamos colocar a coluna propriamente dita, localize:

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

Logo depois dessas linhas você encontrará uns Gadgets que tem no seu blog, veja o exemplo abaixo:

<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>

Copie qualquer uma delas e coloque no código abaixo da mesma maneira que fizemos:

<div id='newsidebar-wrapper'><b:section class='sidebar' id='novabarra' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
Agora coloque isso antes de:
<div id='main-wrapper'><b:section class='main'.....

Isso você encontrará a poucas linhas acima de onde você copiou o código, preste muita atenção num detalhe muito importante por exemplo, se copiou a linha <b:widget id='HTML2' locked='false' title='' type='HTML'/> para colocar no código da nova coluna deve apagar de onde estava ou seja na verdade vamos mudá-lo de lugar e não deixar 2 iguais, se deixar os dois na hora de salvar não vai conseguir pois o blog mostrará conteúdo duplicado.

Agora visualize e se estiver tudo certo clique em salvar.

Referências: Dicas para Blogs

1 comentários:

topmaiz disse...

Essa dica é muito interessante, valeu!!!

© 2010 | Rei do Bloguinho |Todos os direitos reservados
topo ↑