Como dividir o conteúdo dos posts e artigos em colunas no blog - Postagem em colunas

14 comentários
Posts em colunas

Como dividir postagem em colunas

Neste artigo, vamos ensinar como dividir o conteúdo do seu post em colunas.

Muitos blogueiros tem a necessidade de dividir seus artigos ou postagens em duas, três, quatro colunas. Para isso, usamos um código simples, que é aplicado na página de criação de postagem no modo html.

Tutorial - Dividindo o post

O primeiro código:



No código, acima, inserimos duas colunas, onde cada coluna ocupa 45% da largura da página do post. Veja o exemplo:

<div style="float: left; width: 45%">
aqui o texto da coluna da esquerda</div>
<div style="float: right; width: 45%">
Aqui o Texto da coluna da direita</div>

A representação das cores no código acima é assim:

verde: Conteúdo da coluna

vermelho: Antes e após o contudo da coluna

O total das colunas não pode passar de 100% da largura da página e as margens são ajustadas automaticamente com o espaço liberado na porcentagem das colunas. Veja:

Aqui o Texto da Coluna da Esquerda
Aqui o Texto da Coluna da Direita




Agora, para criar três ou mais colunas, usamos um html diferente do citado acima. Veja o código:


No exemplo do código acima, inserimos um novo conjunto de HTML, onde você pode adicionar quantas colunas quiser, e determinamos uma margem de 2 px.

Você pode alterá-la para a margem que quiser, porém, aconselhamos deixar como está para não confundir a leitura do conteúdo que você quer publicar.

Veja o exemplo com 3 colunas:

Esquerda
Aqui é a minha coluna da esquerda
Direita
Aqui é a minha coluna da direita
Meio

Aqui é a minha coluna do meio

Para adicionar uma ou mais colunas, basta acrescentar o código:

<div style="float:both;padding:2px;text-align:center">
esta coluna ficará no meio
</div>

As mesmas alterações no código acima se aplicam à primeira explicação. veja o exemplo:

div style="float:both;padding:2px;text-align:center">meio</div>
  • verde conteúdo da coluna

  • vermelho Antes e após conteúdo da coluna

Teste os códigos, modifique, use sua criatividade! 

14 comentários :

  1. Valeu parceiro!!!!
    Estou sempre aqui consultando e aprendendo.
    Obrigado e um abraço meu caro.

    ResponderExcluir
    Respostas
    1. Olá, Jair é sempre bom ter sua visita aqui conosco, agrademos o contato qualquer duvida não deixe de nos contactamos.

      Excluir
  2. Consigo postar em duas colunas, mas não em três.

    ResponderExcluir
    Respostas
    1. Olá, qual está sendo sua dificuldade em postar em três colunas amigo?

      Excluir
  3. Quando colo o código para 3 colunas em HTML e volto para o modo escrever, aparece coluna da esquerda, do meio e da direita, mas ao escrever ou colar texto em qualquer uma das 3 colunas o texto acaba ocupando toda a largura do post.

    ResponderExcluir
  4. Olá, você deve colocar o texto no modo html destro das tags descritas no tutorial acima.

    Abraços... Andrew silva do BG!

    ResponderExcluir
    Respostas
    1. É exatamente o que faço. Quando utilizo o código para duas colunas, beleza; quando colo o código para três colunas, NÃO FUNCIONA, simplesmente não há mudança de linha...

      Excluir
    2. Vamos dar uma analisar o seu pedido fazer alguns testes e logo e em seguida postaremos algo para você amigo.

      Excluir
  5. bem na verdade eu gostaria de saber como fazer essas colunas que indicam inicio postagens links uteis e etc ... vc pode me ajudar ?

    ResponderExcluir
    Respostas
    1. Olá, Marya. Gostaria de saber se você está se referindo ao menu do BG?

      Excluir
  6. Para postagem em três colunas deve-se digitar percentuais, como em duas colunas? Continuo não conseguindo!

    ResponderExcluir
  7. Olá amigo, gostaria de dividir num só gadget o Twitter, Facebook e recomendações do FC, do meu blog, (blogger).

    Já vi várias pessoas fazendo isto, há vários tempos venho tentando, porém, até hoje nunca conseguir.

    Será que pode me ajudar ? Já tentei também segundo os passos deste tutorial, porém, também sem exito.

    Aguardo sua resposta!

    Seria um modelo semelhante à este. https://lh6.googleusercontent.com/-6PtGhjtYylI/UxTak6SCIUI/AAAAAAAAJfo/R1vQzh4_HSY/h120/Sem%2Bt%25C3%25ADtulo.png

    ResponderExcluir
  8. Apareceu um embaixo do outro em vez de aparecer em 3 colunas.

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.