19/02/2013

Como separar as postagens em caixas


Yoo!!! Vamos ao tutorial do dia, hoje irei mostrar como separar a área das postagens em caixas, tipo, praticamente todos os modelos do blogger (Travel) que usamos para fazer nossos modelos, são juntos. Antes de começar o tutorial queria agradecer pelos 612 seguidores, agradeço a todos que ajudaram a conquistar essa meta, obrigada mesmo. Então vou mostrar agora como separar eles, de forma rápida e fácil, vamos lá?

Eu fiz um teste rápido é funcionou, ao concluir ficara assim. Detalhe, o modelo da postagem não vai ficar como ao que mostro ai em baixo, apenas com o espaço. Vocês tem que personalizar, só estou avisando para não acontecer reclamações como na postagem de personalizar a sidebar.



1. Para fazer isso vá ate seu HTML e clique na caixinha "Expandir modelo de windget". Então usando o atalho Ctrl+F procure por isso:

Códigos
.main-inner .column-center-outer {   background: $(post.background.color) $(post.background.url) repeat scroll top left;   _background-image: none; }


2. Assim que achar apague todo ele colocando esse no lugar:

Códigos
.post-outer {
margin: 4px 2px 10px;
background:#fff;
padding: 20px 10px;
}

A onde esta em vermelho é o espaço entre as postagens, então se quiser mais só aumentar o número. Também tem o espaço das postagens entre a sidebar, como também do título das postagens onde diminui aquele espacinho, e só ir futucando e arrumando como desejar.

Créditos: Capture Dream

81 comentários:

  1. Anônimo19/2/13

    Legal, gostei bastante sempre quis saber como separar

    ResponderExcluir
  2. Anônimo19/2/13

    Para onde você vai?

    ResponderExcluir
  3. Mundo das Ruivas19/2/13

    Obrigada pelo tutorial vai me ajudar bastante, para onde vc vai viajar?

    ResponderExcluir
    Respostas
    1. De nada, não quero comentar ainda falarei em uma post surpresa quando eu ja estiver la

      Excluir
  4. Anônimo19/2/13

    Poxa legal, boa viajem Wendy

    ResponderExcluir
  5. Anônimo19/2/13

    Wendy poderia ensinar como fazer um fonte perfurando o fundo, assim como você fez no seu cabeçalho onde ta escrito Bunny Crazy?

    ResponderExcluir
  6. Bruno19/2/13

    Drw você tem tutorial mostrando como colocar slide no cabeçalho?

    ResponderExcluir
    Respostas
    1. Sim eu tenho, pesquise por Big Tutorial aqui no blog e vai ver uma postagem escrito colocando Slide no cabeçalho

      Excluir
  7. Muito legal o tutorial..Eu já tinha visto, mas os que eu tinha visto, a caixa ficava redonda!! Vou usar no meu próximo layout :D
    Obrigada
    Beijos
    sweet-divertido.blogspot.com

    ResponderExcluir
    Respostas
    1. Serio redonda? Deve ficar bem diferente *-*

      Excluir
  8. Já conhecia o tuto, mais nunca consigo colocar as bordinhas nela ç.ç...

    ResponderExcluir
    Respostas
    1. Não entao farei uma post mostrando como colocar ^^

      Excluir
    2. aaaaaaawn Brigada Wendy, sua lindah' uhaushu

      Excluir
  9. Anônimo19/2/13

    O bom é que não vai ficar sem postar *0* seria uma pena não postar. Afinal todos os blogs estao parando D:

    ResponderExcluir
    Respostas
    1. Isso e por causa das voltas aulas em breve todos estaram de volta

      Excluir
  10. Anônimo19/2/13

    Olá, estou querendo começar um blog mas antes queria aprender um pouco. Você tem alguma postagem que possa me ajudar? Como criar um template ou...dicas que possam me ajudar, desde ja agradeço.

    ResponderExcluir
    Respostas
    1. Oi fofa tenho sim, o dicas Split e o big tutorial ensinando como fazer um layout vou mandar os links pelo email pra vc

      Excluir
  11. Anônimo19/2/13

    Oie lembra de mim? Caraca depois de bastante tempo volto aqui para fazer visita e o que vejo *o* o blog ta totalmente diferente, modelo ate o nome mudo fico chique agora rsrs parabens

    ResponderExcluir
    Respostas
    1. rsrs Lembro sim, eu não esqueço de ninguem. Mas verdade o blog mudo bastante espero que para melhor rsrs

      Excluir
  12. Muito útil , só uso minhas postagens assim !
    É o melhor geito.

    Beijos.
    http://meucupcakedemorango.blogspot.com.br/

    ResponderExcluir
  13. Anônimo19/2/13

    Esse tutorial e muito legal e bem fácil de fazer né
    Beijos
    http://blog-html-for-you.blogspot.com/

    ResponderExcluir
  14. Talvez eu coloque pois além de ser bem bonitinho, é organizado.
    E o resultado é uma maravilha !
    Beijinhos // Utilitários Diamond

    ResponderExcluir
  15. Adorei o tutorial ♥
    Beijinhos
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  16. Por isso n entrou ontem rs ~
    Fiquei até 3:30 da manhã te esperando :P
    Boa Viagem !

    ResponderExcluir
    Respostas
    1. Desculpe Yu, mas ja estou arrumando aquela nossa coisinha

      Excluir
  17. Adorei a dica, fica muito mais bonito a visualização.

    Beijinhos e ja estou seguindo.

    ResponderExcluir
  18. Oi flor será que poderia ensinar como troca a área das postagens para 2 cores como o seu é que eu quero trocar o meu. Obrigada
    The Inevitable

    ResponderExcluir
  19. Eu sempre usava esse tuto ! mas esqueci de por no meu lay atual ! na verdade nem sei se combinaria , mas é um tuto mt útil !

    http://shinigamipower.blogspot.com.br/

    ResponderExcluir
  20. valeu estava doida procurando isso ^^

    ResponderExcluir
    Respostas
    1. Ahh de nada, fico feliz que tenha lhe ajudado.

      Excluir
  21. Oi, tem como você fazer um tutorial como fazer um efeito como o do seu gadget "Mais Vistas" amei demais por favor..

    ResponderExcluir
    Respostas
    1. Yo Thais sim já fizeram o pedido e postei, tá aqui: Sliding Tags

      Excluir
  22. Anônimo26/6/13

    Não conseguir fazer, depois que o HTML do blogger mudou de novo nunca acho as coisas :/

    ResponderExcluir
    Respostas
    1. O safado do blog tiro o expandir, então para abrir os códigos é só procurar por ]] ai depois procure por qual você desejar esse ai acima fico um pouco diferente então procure só pela primeira parte:

      .main-inner .column-center-outer

      Excluir
  23. Anônimo23/7/13

    Legal, mas nunca acho os códigos que quase todos os blogs de tutoriais falam :(
    Mas pôô, legal mesmo, gostei e boa viagem!

    ResponderExcluir
    Respostas
    1. Poxa que pena.... t.t
      Mas obrigada, espero que seja boa sim ^^"

      Excluir
  24. Anônimo25/7/13

    Gostei bastante, mas em vez disso o fundo do meu apagou :(

    ResponderExcluir
    Respostas
    1. Serio? Que pena... Experimenta fazer mais uma vez, as vezes acontece de um codigo sair do lugar

      Excluir
  25. Anônimo10/8/13

    Obrigada, funcionou direitinho aqui! Estou te seguindo :*

    http://lovegacchin.blogspot.com.br/

    ResponderExcluir
  26. Apliquei no meu blog e ficou ótimo. Obrigada!!

    ResponderExcluir
  27. Oiis .. amei o tutu, mais com esse novo modelo do Blogger não consigo achar o "Expandir modelo de widget", poderia me falar onde fica?! Bjuux =*

    ResponderExcluir
    Respostas
    1. Olá fofa o blogger removeu a função "Expandir modelo de widget".
      Então faça assim clique na caixa onde fica os códigos e HTML e acione o atalho Ctrl+f e procure pelo código direto.

      .main-inner .column-center-outer { Se ainda assim não achar procure por: /* Posts abaixo vai estar mais ou menos assim:

      h3.post-title {
      (outros codigos...)
      }
      .main-inner .column-center-outer {

      Ai é só mecher no main, se ainda assim não consegui me diga para poder lhe ajudar. ok? Beijokas.

      Excluir
  28. Anônimo29/10/13

    Como que eu uso esse código depois de subir a área dos posts?

    ResponderExcluir
    Respostas
    1. Oi primeiramente remova o código de subir área, então coloque esse código e salve. Agora procure por:

      .main-inner .column-center-inner {

      e abaixo dele coloque o código de subir.

      margin-top: 48px; (só arrumar o valor). Espero que isso ajude. Kiss ^^

      Excluir
  29. Obrigada me ajudou bastante.

    ResponderExcluir
  30. É tão fácil, e tão útil! Hahah, obrigada ♥

    www.amoraoprimeirorimel.com

    ResponderExcluir
    Respostas
    1. Verdade :3 e muito obrigada por comentar, fico feliz que tenha sido útil a você.

      Excluir
  31. Deu certo \o/ obrigada!

    ResponderExcluir
  32. Quando eu pesquiso não aparece :(

    ResponderExcluir
    Respostas
    1. Puxa Sáh tenta pesquisar só por uma parte do código tipo:
      .main-inner .column-center-outer {

      Excluir
  33. não encontrei
    .main-inner .column-center-outer { background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }

    me ajuda!

    ResponderExcluir
  34. O que é isso. Se for aquelas coisas de "Vizualizações Dinâmicas" e esses modelos ede blog o meu modelo é o "Simple Black"

    ResponderExcluir
    Respostas
    1. Desculpe não compreendi. Bom esse tutorial e para criar espaço entre as postagens, eu testei apenas no modelos travel.

      Excluir
  35. Que lindo e realmente,fica demais né,amei o tuto,poderia me ensinar em uma postagem sua como mudar a postagem,deixar ela em forma de caderno,ou igual a sua??

    ResponderExcluir
    Respostas
    1. Obrigada Ester, fico feliz que tenha gostado.^^ Estilo caderno? Como de meu lay atual?

      Excluir
  36. henrique8/12/14

    Mais um tutorial furado!!!Não existe essa TAG não sei como esses caras dizem que adoraram,ótimo tutorial.... sem comentários.

    ResponderExcluir
    Respostas
    1. Não é furado Henrique, tanto que estou usando no meu layout atual, assim como muitos usam e sempre uso esse mesmo tutorial. Todos os blogs tem essa tag, mas algumas com o nome diferente ou com espaços a mais, por isso verifique direitinho. Talvez o seu layout tenha o nome da tag diferente, ou não pesquisou direito. Aconselho fazer novamente ou procurar um tutorial mais adequado para seu layout. Se os outros leitores agradecem é porque conseguiram executar e deu certo, realmente é estranho que não tenha dado certo no seu =( Se desejar deixe o link do seu blog para que eu possa ver qual é o nome de sua tag. ^^

      Excluir
  37. Anônimo27/8/17

    Tu poderia ensinar a dividir os posts em caixas, que nem no tumblr? (isso se der)

    Adorei este tutorial! <3

    ResponderExcluir
    Respostas
    1. Claro! Mas tem fotinho para me orientar melhor? Você diz estilo galeria?

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345