12 de maio de 2012

18

Dividir texto de postagem em duas colunas



lá pessoal! Essa é uma dica muito legal para quem deseja trabalhar com textos dividido em duas colunas na postagem do Blog...

O que vamos utilizar será um código bem simples, que no qual, ele separa o texto da postagem em colunas "direita" e "esquerda". Então, veja como fazer no seu Blog.


Como dividir o texto da postagem em duas colunas

1º Passo: Vocês irão copiar o seguinte código disponibilizado logo abaixo:

<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>
<divstyle="clear: both"></div>

2º Passo: Agora, crie uma nova postagem no Blog só para testar  esse código.

3º Passo: No painel onde criamos nossa postagem, clique no botão HTML e cole o código das colunas que foi disponibilizado logo acima.

4º Passo: Depois de adicionar o código das colunas, volte para o conteúdo clicando no botão "ESCREVER". Quando voltar, vai aparecer as colunas "Direita" e "Esquerda", então, é só editá-las do jeito que preferi.

Veja um exemplo abaixo das colunas


teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste ...



teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste ...















Observação 1: lá no código, tem uma parte destacado em Azul, esta parte Significa a largura de cada coluna, então, se precisar ajustar a largura das colunas, basta você alterar o Valor "45". Lembrando, se você diminuir a largura de uma coluna, na outra você tem que aumentar.
Observação 2: Se você for querer utilizar as colunas em outras postagens, o mesmo terá que fazer o mesmo procedimento para cada umas delas, ok! 


Como colocar Imagem

Se você não sabe como colocar imagens em determinada coluna, vaja como colocar.
Primeiro clique na determinada coluna onde você deseja inserir a imagem, depois, você vai clicar na opção Inserir Imagem
Agora, clique em escolher arquivos e espere a imagem carregar, e depois adicione a imagem. Feito isso a imagem vai aparecer, e pronto!





18 comentários:

  1. Valeu me ajudou muito. Passa lá no meu blog

    ResponderExcluir
  2. Olá, tudo bem?
    Gostei muito da dica!
    Agora como faço para adicionar fotos e com título na lateral ou abaixo das fotos e com um link leia mais>>>?
    Aguardo um breve retorno,
    abraços,
    hélio katsube
    deixo o meu e-mail helio-katsube@hotmail.com

    ResponderExcluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Por Favor corrija- verbo começar (com c cedilha)..."Depois de colocar o código, clique no Botão Escrever, e COMECE a digitar", erros faz com que se perca a credibilidade...!

    ResponderExcluir
  5. Isso funciona com algum Gadget? Tipo colocar links de blogs recomendados em colunas?

    ResponderExcluir
  6. Fiz o teste e deu certinho!! Eu amei o resultado!! Obrigada!

    ResponderExcluir
  7. muito bom obrigado
    http://forcadeler.blogspot.com.br/

    ResponderExcluir
  8. muito bom obrigado
    http://forcadeler.blogspot.com.br/

    ResponderExcluir
  9. Queria saber se tem como dividir a área na home do blog em colunas.
    Colocar os posts em colunas?

    ResponderExcluir
  10. Parabens pela ideia genial
    vou fazer posts parecidos com jornais antigos
    "quero tambem aqieles icones voce podera gostar de"
    enquanto não acho vou fazer duas coluninhas no rodape com icones
    http://katiaraynier.wordpress.com/

    ResponderExcluir
  11. Olá!
    Seu código me ajudou muito e já estou usando no meu blog.
    Tive a liberdade de divulgar ele também em uma postagem que vai ao ar dia 16/07/14 com os devidos créditos. Qualquer coisa, dá uma passada lá.
    Obrigada! Blog Saphiy

    ResponderExcluir
  12. Este comentário foi removido pelo autor.

    ResponderExcluir
  13. Muito obrigado, você me salvou aqui amigo.
    fiz uma página inserindo um campo de comentários do facebook de um lado e miniaturas de imagens do outro lado.
    Valeu.

    ResponderExcluir
  14. Eu preciso colocar quatro colunas na medida do exemplo acima. Como faço?

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook