.


segunda-feira, 11 de abril de 2011

colocar mais coluna no blog

Colocar mais uma coluna no blog

Para colocar mais uma colunas no blog, ou seja, fazer um blog com 3 colunas é um pouco complicado então antes de iniciar recomendamos salvar uma cópia do seu modelo como está antes das alterações. Para fazer isso entre na pagina editar html e clique no link baixar modelo completo, abrirá uma janela de download para você salvar seu modelo, veja aqui mais sobre backup do blog.
Usamos como exemplo o modelo Mínima, então na pagina editar html procure por: #header-wrapper, #outer-wrapper e #footer nestas três partes você encontrará width:660px; troque esse 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 */
}

Repare se no trecho já existente #sidebar a parte float:....; está com a palavra right, se não tiver altere pois dependendo disso as duas colunas podem ficar do mesmo lado do blog.

Até aqui colocar os estilos CSS que define a largura da nova coluna e aumentamos a largura total do blog. A seguir vamos colocar a coluna propriamente dita, localize:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Logo depois dessa linha você verá os códigos dos gadgets que tem no seu blog, elas são mais ou menos assim:

<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 está poucas linhas acima de onde copiou o código. Preste 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 é só visualizar o blog e se estiver tudo certo clique em salvar. Depois disso é só ir a pagina layout e arrastar os gadgets para a coluna que desejar e assim acabar de organizar o blog do jeito que gostar mais. Caso uma das colunas apareça no final do blog em vez de uma ao lado da outra tente diminuir um pouco a largura da coluna (170px) ou aumentar a largura total do blog (980px).

1 Comment:

Poquiviqui said...

Muito útil!
Utilizo uma só no meu, mas no rodapé achei um jeito de por 3! Ficou bacana até! Se quiser conhecer: http://geisting.blogspot.com/

Abraço Ju! :)

Postar um comentário

Olá Amigos(as), Muito Obrigada pelo comentarios
logo responderei a todos!!!
Beijoss!!!

.



Este blog contém posts e comentários.

.




Acessos:
-
English Espanhol François Deutch Italiano Japanese Russian Neederland Greek





--
Recomendo!!!
Link-me