Coluna ao lado do Título

Nós mexemos tanto com códigos CSS que algumas coisas nos passam despercebidas, e por incrível que possa parecer são justamente as coisas mais simples que não conseguimos ver.
Um exemplo disso é usar valor negativo na margem superior de uma das colunas para fazê-la aparecer mais no alto da pagina do que a outra coluna e as postagens, podendo até ficar como se a coluna se iniciasse ao lado do titulo do blog, mas claro que se fizer isso tem que arrumar o titulo do blog ou a imagem que usa no lugar do titulo para não sobrepor a coluna na imagem. Isso dá um efeito muito legal. Veja na imagem como as colunas estão mais para cima que as postagens.


O código para fazer isso é simples basta colocar junto com o código da coluna margin-top:-320px; então o código da coluna (sidebar) ficará mais ou menos assim:

#sidebar-wrapper {margin-left:20px;margin-top:-320px;
width: 250px;
float: right;
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 */
}

Claro que a largura (250) e float (right) serão diferentes no seu blog, mas o importante para deixar uma coluna mais para cima que as outras é o trecho margin-top:-320px; depois é só ajustar os valores para o seu blog. Isso pode ser feito em qualquer coluna ou nas postagens. A imagem que usei como exemplo é de um blog que ajudei a modificar há pouco tempo, ele pertence à Graça de Oliveira.

35 comentários :

  1. Dica bem legal!Obrigado,um abraço,chica

    ResponderExcluir
  2. ola bom dia, queria saber mesmo como faço p/ colocar minha imagem como plano de fundo em meu blog....tipo esta ai mas com minha imagem e aonde em qual setor do mesmo???aguardo contato
    www.portalromilson.blog.com.br
    romilson.lopes@hotmail.com

    ResponderExcluir
  3. sobre imagem de fundo temos varias postagens sobre o assunto

    http://dicasparablogs.blogspot.com/search/label/Imagem%20de%20Fundo

    a imagem de fundo do blog é junto com a tag body.

    ResponderExcluir
  4. Dica simples e que faz muito bem ao visual de determinados blogs,
    parabéns,
    Gustavo.

    ResponderExcluir
  5. Cara, eu queria saber se tem como alterar o tamanho da font nos títulos do gadget, tem como fazer isso?
    Por favor, se tiver, posta ou entra em contato: umdiarioinsano@gmail.com

    ResponderExcluir
  6. Muito boa a tua dica.

    Bom fim de semana.

    ResponderExcluir
  7. aqui tem como colocar um menu embaixo do titulo
    http://dicasparablogs.blogspot.com/2008/05/menu-horizontal.html

    ResponderExcluir
  8. sobre mudar a fonte do titulo dos gadgets, entre na pagina editar html e procure por h2{...}, esse é a parte que controla os titulos, então é só colocar font-size: 120%; se quiser em vez de % pode usar pt, assim 14pt

    ResponderExcluir
  9. Fabiano, achei o blog de Graça lindo e ha muito tempo procuro como colocar mais uma coluna, assim como o dela e o seu, que tem 3 colunas. Vc pode me ajudar? meu site é salvadornoticias.com mas hospedei no blogspot.

    ResponderExcluir
  10. Denise Morais

    aqui tem como colocar mais uma coluna

    http://dicasparablogs.blogspot.com/2007/12/blog-com-3-colunas.html

    se quiser escreva para nosso email, estamos preparando um template para download e se quiser posso enviar para você

    ResponderExcluir
  11. nao percebo! quando eu colo um url na mensagem so aparece a imagem em pequena onde e que eu colo o url??? alias eu ainda nem percebi se e 'para colar o url ou outra coisa!!!!!!!!!!1

    ResponderExcluir
  12. Gostaria de saber como colocar duas colunas no blog uma do lado esquerdo e outra do lado direito!

    ResponderExcluir
  13. Olá! Como sempre pego dicas maravilhosas aqui, agradeço desde de já! Mas , meu estou com o seguinte problema:
    Baixei o layout estrelado que é simplesmente perfeito para um dos meus blogs, mas quando tento aumentar a altura da coluna direita com o codigo que voce nos fornece, que inclusive fiz o teste num blog de teste normal oferecido pelo blogger e funcionou perfeitamente, mas no estrelado de 3 colunas não entra de maneira alguma. Pode me ajudar? quero subir até o topo a coluna da direita

    ResponderExcluir
  14. Marcia Bispo

    o pior que usei aquele modelo como teste para esse código. então era para funcionar normalmente nele, será que não faltou alguma letra ou sinal quando foi colocar o código? detalhes fazem não funcionar.

    qual o link do seu que colocou o template? se quiser responda para nosso email contato@dicasparablogs.com.br

    ResponderExcluir
  15. Achei Legal essa dica mais naum combinou pra meu blog estão tirei...
    http://centralrpgpower.blogspot.com/

    ResponderExcluir
  16. Você poderia me ajudar?
    Como faço para colocar duas colunas em meu blog?
    abraços

    ResponderExcluir
  17. veja aqui como colocar mais uma coluna no blog
    http://www.dicasparablogs.com.br/2007/12/blog-com-3-colunas.html

    ResponderExcluir
  18. Olá!
    Gostaria de alguma dica, sobre como faço pra deixar um pedaço da imagem que acompanha o meu título, em cima das colunas.
    Se puder me ajudar, fico agradecida, ^^

    ResponderExcluir
  19. tem que colocar uma valor negativo na margin das colunas, e claro uma imagem no lugar do titulo do blog que ocupe a largura total dele

    ResponderExcluir
  20. Gostaria de cria um blog.

    me ajude

    como faço?

    jessyca.reimberg@gmail.com

    aguardo até+

    ResponderExcluir
  21. Oo problema, é que as minhas colunas SEMPRE ficam em cima da imagem que acompanha o título, :'(:'( =/

    ResponderExcluir
  22. Luana Vitória ~
    então deve colocar margin no código da sidebar com valor positivo, ao contrario do que mostramos nesta postagem

    ResponderExcluir
  23. Como que faço pra conseguir deixar a coluna dos post mais clara que as outras? Como se fosse um efeito chateado?

    ResponderExcluir
  24. Fabrih
    você poderia definir a cor de fundo em cada sidebar usando background-color:#ffffcc;

    mas prefiro usar uma imagem de fundo, veja mais aqui:

    Template do Blog, colunas de tamanhos iguais

    ResponderExcluir
  25. Eu estou com dificuldades de achar o #sidebar-wrapper
    eu não encontro :/ nao sei se é o meu modelo, ou outra coisa. eu uso o travel.

    ResponderExcluir
  26. A garota do blog
    se você usar os template novos pode alterar o numero de colunas na pagina designer do modelo

    ResponderExcluir
  27. Não sabia que dava para fazer isso no designer do modelo, vou tentar, mas em todo o caso, se não conseguir eu volto aqui, beijoooos

    ResponderExcluir
  28. não consegui. tentei em tudo, ajustar larguras. layout do modelo. avançado, mas nada. :/

    ResponderExcluir
  29. o seu blog na frente do meu hahhahahah o seu é uma porcaria

    ResponderExcluir
  30. Boa tarde Fabiano.
    Não consigo visualizar o código da "coluna margin-top:-320px;" no meu blog, pois quero fazer um igual ao que voce demonstrou acima, com colunas ao lado do título.
    Meu blog: http://orquideasfloresperfeitas.blogspot.com/
    Poderia me ajudar?
    Atenciosamente
    Rinaldo Bradtfixe Ignacio

    ResponderExcluir
  31. Rinaldo e Valéria
    infelizmente os templates mudaram bastante desde que fiz esse tutorial

    mas tem que colocar margin-top no código da coluna... mas é dificil dizer o lugar exato pois varia conforme o template

    ResponderExcluir
  32. Boa tarde Fabiano.
    Lhe enviei um e-mail, para que tenha um visual do blog.
    Abraços
    Rinaldo Bradtfixe Ignacio

    ResponderExcluir