Dividir um gadget em duas colunas

Vamos mostrar como colocar duas imagens lado a lado ou então criar duas colunas dentro do mesmo gadget e também como fazer para mostrar vários acessórios diferentes no final de cada postagem um do lado do outro. Com esse código é possível dividir um gadget em duas colunas e assim aproveitar melhor o espaço na sua página.

dividir gadgetsExibir acessórios um do lado do outro no final das postagens ou em qualquer gadget pode ser muito útil, veja, por exemplo, no final de nossas postagens, mostrarmos o botão retweet, link da pagina e o link para enviar a postagem por email.

Lembramos que esse código é para ser utilizado como um gadget de html (pagina layout > adicionar gadget > html/javascript) ou então para mostrar acessorios um ao lado do outro no final de cada postagem neste caso entre na pagina editar html, clique para expandir o modelo e coloque o código após post.body, como neste tutorial sobre mostrar o link da postagem.

Isso é feito com o seguinte código:

<div style="float:left;padding:2px;text-align:center">esquerda</div>
<div style="float:right;padding:2px;text-align:center">direita</div>
<div style="clear:both;padding:2px;text-align:center">embaixo</div>


Esse código faz como se fossem 3 caixas: uma a direita outra a esquerda e uma terceira embaixo, você pode colocar o que desejar dentro de cada uma delas. A parte padding:2px;text-align:center repete-se em todas para centralizar e dar uma pequena margem(2px) dentro das “caixas”. Se quiser pode retirar esse trecho e apenas perderá o alinhamento ao centro e a margem, o posicionamento continuará o mesmo.

Se achar que o conteúdo das duas colunas ficaram muito distantes uma da outra pode corrigir isso trocando o padding:2px por padding-left:5px, claro que usando o valor que achar melhor e fazendo a mesma coisa nas duas colunas, ou seja na coluna onde tem float:right use padding-right:5px.

contadores twitter - feedburnerÉ com um código parecido com esse que fazemos nossos contadores do Feed e Twitter um do lado do outro no inicio da pagina, claro que antes disso tivemos que dividir o cabeçalho do blog em duas partes.

Esperamos que gostem de mais essa dica sobre layout do blog. Apenas tome cuidado para não colocar imagens ou objetos largos demais dentro deste código isso poderá gerar erros.

73 comentários:

  1. Fabiano, Muito obrigado por responder minha pergunta, so tenho um problema os gadjets da direita e esquerda ficam muito afastados do de baixo, e quando aumento o padding eles vão pro meio porém "empurram" o de que fica embaixo pra mais pra baixo, o que pode ser? Você já sabe qual e meu site né ? da uma olhada la...
    Um Abç Fabiano

    ResponderExcluir
  2. se quiser pode usar padding-left e padding-right, para acertar a posição deles.

    colocando cada em uma das colunas

    ResponderExcluir
  3. vou fazer uma alteração na postagem colocando isso, sobre os paddings left e right

    ResponderExcluir
  4. Consegui Fabiano, muito obrigado...
    Uma ultima pergunta, Os 3 gadgets ficam muito "colados" na postagem, como descer eles um pouco?
    Obg pela atenção =D

    ResponderExcluir
  5. se for somente para dar um espaço acima pode colocar um <br/> antes do código que usará dentro da coluna

    esse é o jeito mais simples de pular uma linha

    ResponderExcluir
  6. Fabiano vc conhece um local que eu possa hospedar imagems fora o photbucket e o imageshack? Obrigado :)

    ResponderExcluir
  7. Fabiano eu consegui colocar os codigos depois de muito sacrificio só q agora o problema esta q eu consegui deixar um do lado direito e outro do lado esquerdo só q um fica em baixo e o outro fica em cima eles ñ ficam lado a lado como no seu

    ResponderExcluir
  8. OLá !!!
    Gostei muuito da dica e utilizei no meu blog =D
    Muito obrigada e continue com essas dicas excelentes e muito úteis =)

    ResponderExcluir
  9. Anônimo
    conheço outros sites de hospedagem mas não sei qual recomendar pois nunca usei outros, mas veja aqui: Sites úteis para Blogueiros

    Gisa
    o código funcionará desde que haja espaço suficiente no gadget, quero dizer por exemplo a coluna onde está o gadge tem 170 px de largura, de eu usar esse código para colocar os dois contadores lado a lado não vai funcionar porque os dois contadores juntos somam mais que 170, então não tem espaço e ficará um embaixo do outro.

    ResponderExcluir
  10. Consegui, tuto perfeito =D.
    Fabiano, você conhece algum editor igual ao messenger writer, eu instalei mais sempre que executo ele da como não respondendo, algum parecido com ele ou talvez uma copia separada...
    Não sei de onde vem esse erro
    OBS: Já executei como administrador.

    ResponderExcluir
  11. Como posso construir um Menu Horizontal e onde coloco os códigos do mesmo?

    ResponderExcluir
  12. L. Tadeu
    não sei qual recomendar, nunca usei esses programas.

    ResponderExcluir
  13. Fabiano, gostei bastante da dica e gostaria de usa-la. O problema é que não sei onde calr o código no HTML do blog. Pode explicar ou atualizar este post?

    Abraço e Parabéns!!!

    ResponderExcluir
  14. NetoO
    você tem razão, não mencionamos isso, mas serve tanto para o gadget de html como para colocar algo no final da postagem.

    ResponderExcluir
  15. Obrigado pela atenção Fabiano. Mais uma vez, ótima dica!

    Abraço!

    ResponderExcluir
  16. Fabiano eu apertei ctrl F para procurar post.body só que não acha eu não estou conseguindo colocar por causa disso me ajuda.

    ResponderExcluir
  17. Raphaela
    para achar o post.body precisa clicar para expandir o modelo

    ResponderExcluir
  18. Olá boa noite, eu gostaria de saber se existe um gatget para por no Blogger, do Tumblr? Eu já vi em vários blogs do blogspot mas nunca descobri o código. O serviço se chama Tumblr é uma espécia de blog também onde se posta fotos e eu gostaria de saber o código - gatget para aparecer a última foto postada no Tumblr. Ficarei acompanhando o Dicas Para Blogs, pois não encontrei em nenhum lugar. Se alguém souber, agradeço desde já. Obrigada!

    ResponderExcluir
  19. Nossa pra que tudo isso Oo, faz logo em tabela, fica muito mais fácil, e sem risco de nenhum navegador ler errado, já que não vai usar padding, margin e tudo mais.
    Com certeza tabela e a melhor alternativa para isso.

    ResponderExcluir
  20. ♥ Vίνίαŋє ♥
    não conheço esse gadget que falou

    Claudio Sanches
    imagino que você tenha um programa para gerar o código da tabela, sei que funciona do mesmo jeito, mas para fazer o código manualmente acho que a tabela mais complicado, mas é uma questão de gosto, os dois jeitos funcionam

    ResponderExcluir
  21. Muito Bom o post ,fazia tempo que esava procurando esse post !

    ResponderExcluir
  22. Gostaria de saber se é possível mudar a posição de um gadget, como deixar ele no topo do blog, para eu colocar uma rádio com gadget HTML/JAVASCRIPT

    ResponderExcluir
  23. ~Wild_Wolf
    depois que adicionar o gadget pode arrastar para qualquer lugar.

    na pagina layout clique sobre o gadget segure o botão de mouse apertado e leve para o lugar que desejar.

    ResponderExcluir
  24. Mais uma dica que utilizo com sucesso no meu blog, alias sempre que desejo algo para o blog venho aqui e encontro...muito bom este espaço, e o relógio esta lá funcionando lindissimo...valeu!!!

    ResponderExcluir
  25. quero seu msn fabiano pode pra vc me da uma força....

    ResponderExcluir
  26. amigo eu gostaria de saber se tem como você mim ajudar...
    tipo meu blog ta funcionando legal
    o unico problema é quando acesso ele com o Internet Explorer que se nota que o mesmo tem uma visualização desagradavel podemos dizer.
    já com outros navegadores como por exemplo o Firefox Google Chromer...
    a visualização é normal.
    ao tentar visualizar ele com o Internet os icos do Twitt, Orkut e Feed vão pra baixo e o mesmo acontece com a caixinha de pesquisa.
    ela sai do seu lugar sem poder fazer pesquisa na msm.
    aqui ta meu blog: http://LeoTurboB13.blogspot.com

    agradeço desde já por sua atenção!!!

    ResponderExcluir
  27. LeoTurbo B13, alguns códigos funcionam diferente nos navegadores, mas acho que deveria adicionar aquelas imagens como um gadget de html/javascript usando códigos normais para imagens e não como fundo. quero dizer adicionar como se fossem banners, com esse código:


    <a href="endereço do site" target="_blank"><img border="0" src="endereço da imagem"/></a>

    ResponderExcluir
  28. Fabiano como essa postagem e como outras qndo coloquei no Gadget aparece só as falavras e não faz nada! poderia me ajudar?

    ResponderExcluir
  29. no exemplo que citamos só aparece as palavras, você deve troca-las pelo conteúdo que desejar

    isso dividirá somente o gadget onde colocou o código e não a coluna toda

    ResponderExcluir
  30. Como faço para deixar a metade do gadget de paginas no menu horizontal abaixo do cabeçalho e outra na coluna vertical do lado esquerdo?

    ResponderExcluir
  31. Diego Medeiros
    pelo que falou está querendo fazer dois menus, os links um embaixo do outro pode ser feito pelo gadget lista de links ou blogs, e o Links lado a lado (menu horizontal) você pode ver aqui

    ResponderExcluir
  32. ô Fabianoooooo, me salve por favor!!! poxaaaa ta dando q o modelo eh invariavel, inviável sei lah.... fiz td direitinho.....
    Bjk, Vanessa Ramos

    ResponderExcluir
  33. esse código é para colocar como um gadget de html/javascript

    tente colocar primeiro como está aqui sem alterar só pra testar, depois troque os textos

    ResponderExcluir
  34. Vlw amigo era o que eu estava precisando.

    ResponderExcluir
  35. Ola fabiano gostaria de saber como só mostrar o conteudo depois quq clikar em Leia mais. tipo igual ao seu blogger. porque o meu leia mais ficou abaixo e queria ele acima, por favor me ajuda ai :)

    ResponderExcluir
  36. Fabiano... Por favor, me diz como diminuir o espaço entre os gadget?
    Há muito espaço entre um e outro.
    Brigadim

    ResponderExcluir
  37. Fabiano estou usando o leia mais do blogger só que ele aparece do lado esquerdo vc sabe me dizer como faço para ele aparecer do lado direito?

    ResponderExcluir
  38. veja aqui Mostrar resumo da postagem

    lá mostra como esse código funciona então é só mudar o alinhamento de left para right

    ResponderExcluir
  39. Olá, Fabiano por favor eu preciso de um pequeno código só para dar um espaço entre os menus que coloquei eu dividi o menu estava um em baixo do outro ai eu coloquei um do lado do outro no mesmo gadget ai ficou coladinho e preciso só dar uma afastada de uns três clicks obrigado pela atenção.
    Billy.

    ResponderExcluir
  40. se aumentar o valor do padding terá mais espaço vazio em todos os lados incluive para cima e para baixo

    ResponderExcluir
  41. desculpe mas o que eu quero saber esse blog não ajudou em nada o meu blog tem que ficar muito daora ele explicar sobre popularidade.

    ResponderExcluir
  42. Garota Capricho
    fazer um blog ficar popular envolve muitas coisas... veja no menu o item mais visitas

    ResponderExcluir
  43. Ola, queria saber como eu coloco esse negocio ai em baixo... igual vc colocou "Outros tutoriais para ajudar Blogueiros" por favor me ajude ? Já tentei tudo !

    ResponderExcluir
  44. Oi queria saber como eu fasso no meu blog tipo assim! criar abinhas uma no lado da outra como vcs tem aki ex:
    |Dicas no seu site| |Parcerias entre Blogs|

    ResponderExcluir
  45. william gabriel willms

    essas abas são na verdade um menu horizontal, neste link você pode ver como fazer um para o seu blog

    ResponderExcluir
  46. Ola Fabiano,

    A Natalia lá em cima, perguntou como diminuir o espaço entre as gadgets. Vc saberia nos informar como aumentar ou diminuir os espaços entre as gadgets? É possivel isso ou esses espaços sao inalteraveis? Obrigada. Sempre venho me socorrer no seu blog. Nota mil pra vc. Continue assim. Katia

    ResponderExcluir
  47. Fabiano, boa tarde!!

    Tem como eu dividir a relação de POSTAGEM MAIS POPULAR em três colunas verticais? Isto é, uma dando continuidade a outra.

    Desde já agradeço,

    ResponderExcluir
  48. mauricio
    não tem como dividir pois é uma lista só

    você pode criar colunas e mostrar as postagens populares numa coluna, banners na outra...

    ResponderExcluir
  49. Adorei esse tutorial! Muito obrigada *-*

    Menina de Deus

    ResponderExcluir
  50. Olá. Deposi de muito procurar.. achei no seu blog oque eu procurava.. obrigada por me salvar... consegui fazer tudo certinho... meu blog muito melhor..!!! Valeu.. Bjs

    http://daidesiderio.blogspot.com

    ResponderExcluir
  51. Tem como colocar 4 colunas uma ao lado da outra?

    ResponderExcluir
  52. você pode colocar mais colunas é só repetir a linha
    < div style="float:right;padding:2px;text-align:center" >direita< / div >

    ResponderExcluir
  53. O Fabiano eu não entendi, eu coloco o codigo como gadget mas nao acontece nada, so fica um retangulo dizendo esquerdo,direita e embaixo, no local onde eu coloquei o gadget. Poderia explicar melhor.
    VLW gostei muito do seu blog, me ajudo bastante

    ResponderExcluir
  54. esse tutorial é sobre dividir o gadget, você deve colocar outros códigos nele

    ResponderExcluir
  55. O FABIANO valeu, eu entendi, achei que era só colocar os códigos e deu, OBRIGADO.

    Eu queria te pedir se tu pode fazer um tutorial de como criar uma nova coluna, pois criei no meu blog só que ela ficava muito pequena comparada com a outra coluna(direita), e ficava muito perto do post. Só que do lado onde eu coloquei a coluna (esquerdo) ficava um bom espaço. Dai pode me ajudar. Valeu denovo!!!

    ResponderExcluir
  56. @WR ANDROID na pagina design do modelo é possivel alterar o template.
    se o seu blog não tem essa pagina veja aqui:Colocar mais uma coluna no blog

    ResponderExcluir
  57. Eu fiz mais não apareceu nada :(

    ResponderExcluir
  58. esse código não tem conteudo, ele só cria as colunas

    ResponderExcluir
  59. Fabiano,estou levando esta dica,bjs

    ResponderExcluir
  60. Ola Fabiano
    O que seria dos iniciantes se houvesse pessoas como você, para ensinar.
    Valeu cara muito boa dica já tava até desistindo de mexer no gadget que eu uso como cabeçalho.
    Abraços

    ResponderExcluir
  61. Olá, equipe do DICAS PARA BLOGS! Tenho um blogue de Poesia, entitulado Poesia Em Prosa E Versos, cujo endereço é www.poesiaemprosaeversos.blogspot.com/
    e tenho tentado divulgá-lo de várias formas. Vários agregadores de conteúdo querem que coloquemos seus banners no blogue. Pensei se seria possível colocá-los, vários deles, um ao lado do outro, para usar melhor o espaço, abaixo de um título, como: SITES PARCEIROS DO "POESIA EM PROSA E VERSOS". Seria possível fazer isto? Se puderem responder-me, meu e-mail é claudioluizsbritomachado129@gmail.com. Depois de ler este post, como sei pouquíssimo de informática, não entendi como se inseririam os códigos dos banners dentro das colunas do código fornecido neste post. Não sei se os códigos dos banners podem ser inseridos depois do código fornecido, um após o outro, ou se devem ser inseridos dentro do código fornecido. Neste último caso, seria preciso saber depois de qual expressão eles teriam que ser colocados. Se puderem explicar-me isto, muito obrigado! E parabéns pela excelente qualidade do DICAS PARA BLOGS! Estou assinando seu feed. Até mais!

    ResponderExcluir
  62. Claudio veja aqui um código para organizar seus banners de parceiros

    Organizar Banners ou Pagina de Parcerias entre Blogs

    mas esse gadget pode ficar em qualquer parte da sua pagina. Não precisa ser perto do titulo

    ResponderExcluir
  63. Fabiano, boa tarde!

    Eu uso um template com dois sidebar nas laterias e a área de postagem no meio. Como eu altero o espaço entre sidebar e a área de postagem?
    Desde já agradeço.
    Mauricio
    www.calopsitar.com.br

    ResponderExcluir
  64. procure no html do seu blog o código

    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 25px 25px;
    }

    altere os valores 25px, eles não margens, veja o exemplo abaixo para saber os lados de cada margem

    padding: 0px 20px 25px 15px;

    0 - acima
    20 - direita
    25 - embaixo
    15 - esquerda

    ResponderExcluir
  65. @Fabiano,

    Lancei um blog de tutoriais, mas estou com um problema. Não consigo colocar as postagens individualmente em caixas como o tema "Espetacular Ltda.", fica tudo junto e quase não tem jeito. Blog: https://goo.gl/hMS3us

    ResponderExcluir
    Respostas
    1. Pelo que entendi você quer a caixa em volta de cada post e não uma caixa para toda a coluna das postagens.


      Então coloque este código no html do seu blog
      .post-outer {
      border: #000 2px solid;
      margin: 10px 0px;background-color: #ff0;}


      a cor de fundo é amarela, sugiro que use assim até terminar de editar pra ser mais facil visualizar.



      retire os trecho:
      .main-posts {
      background-color: #fff;
      padding: 20px;
      width: 620px;
      }




      depois retire a borda (border: 1px solid #dddddd;
      ) no código:
      left-column {
      float: left;
      margin-right: 20px;
      width: 660px;
      margin-top: 30px;
      border: 1px solid #dddddd;



      acho que isso é o principal mas você pode usar o inspecionar elementos para achar os códigos e ajustar espaços vazios ao redor dos posts

      Excluir
    2. @Fabiano,

      Sua dica deu certinho! Te agradeço! Eu já tinha testado com o seletor .post-outer, mas de maneira incerta. O problema era o seletor .main-posts que atrapalhava tudo. Abraço!

      Excluir