Como dividir o conteúdo dos posts e artigos em colunas no blog - Postagem em colunas
blog
,
colunas
,
dividir
,
Postagem
14 comentários
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
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
14 comentários :
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.
Assinar:
Postar comentários
(
Atom
)
Valeu parceiro!!!!
ResponderExcluirEstou sempre aqui consultando e aprendendo.
Obrigado e um abraço meu caro.
Olá, Jair é sempre bom ter sua visita aqui conosco, agrademos o contato qualquer duvida não deixe de nos contactamos.
ExcluirConsigo postar em duas colunas, mas não em três.
ResponderExcluirOlá, qual está sendo sua dificuldade em postar em três colunas amigo?
ExcluirQuando 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.
ResponderExcluirOlá, você deve colocar o texto no modo html destro das tags descritas no tutorial acima.
ResponderExcluirAbraços... Andrew silva do BG!
É 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...
ExcluirVamos dar uma analisar o seu pedido fazer alguns testes e logo e em seguida postaremos algo para você amigo.
Excluirbem na verdade eu gostaria de saber como fazer essas colunas que indicam inicio postagens links uteis e etc ... vc pode me ajudar ?
ResponderExcluirOlá, Marya. Gostaria de saber se você está se referindo ao menu do BG?
ExcluirPara postagem em três colunas deve-se digitar percentuais, como em duas colunas? Continuo não conseguindo!
ResponderExcluirOlá amigo, gostaria de dividir num só gadget o Twitter, Facebook e recomendações do FC, do meu blog, (blogger).
ResponderExcluirJá 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
Muito obrigado!
ResponderExcluirApareceu um embaixo do outro em vez de aparecer em 3 colunas.
ResponderExcluir