domingo, 10 de junho de 2012

Como separar a área das postagens?

Tipo ''muuuuitas'' pessoas estão me pedindo este tutorial O.o Atendendo a vários pedidos aqui está (:
Eu uso o modelo viagem do blogger e não tive problemas para encontrar os códigos! O tutorial é fácil, mais vale lembrar que é sempre bom fazer o backup do blog antes de fazer qualquer modificação no HTML. Ok?

1. Vá no seu HTML. Dê um ctrl + f e na barra de pesquisa que apareceu procure por:
.main-inner .column-center-outer {

Se você ''NUNCA'' mexeu nesta área do template ela estará mais ou menos assim:
.main-inner .column-center-outer {  
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none; 
}


2. Então substitua todo este código por este:

.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
box-shadow: 1px 4px 19px 2px #DCDCDC;
padding: 5px;
border-radius: 50px;
}
P.S - A parte destacada de laranja é a borda arredondada. Quanto maior o valor mais arredondada ficará!
- As partes destacadas de azul equivale  a distancia dos textos e imagens de dentro das postagens ou seja quanto maior o número, mais distante os textos vão ficar da margem da postagem.
- Só altere os números ou os códigos de cores (www)

3. Visualize se estiver tudo ok, salve!

Espero que tenham gostado!
Bye

115 comentários :

  1. Morrendo por esse Tutorial :D
    Thank's

    ResponderExcluir
  2. Amei flor obrigada >.<
    Beijos
    >> http://diariosamigas.blogspot.com.br/ <<

    ResponderExcluir
  3. Não tava achando esse tutu! É bem útil,ainda tenho dúvidas se uso ou não!Vc explicou direitinho!
    Kisses~~
    http://www.cotidianodeumabarbie.tk

    ResponderExcluir
  4. Bacana Jackie, vou testar com certeza. Bjus

    ResponderExcluir
  5. Super tutorial! Essa separação dá uma diferença e tanto no design. Fica muito mais organizado, adoro! KKK!

    Beijos!

    delicadissima.com

    ResponderExcluir
  6. MENTIRA!!! Você não tem noção do quanto eu sofri aqui por não saber disso.
    Odeio postagens juntas e achar um layout com elas separadas era um sacrifício.
    Esse foi o tutorial que eu sempre precisei. *-*
    Salvou a minha vida. haha Ate salvei ele nos favoritos aqui. Amei

    http://uteis-e-futeis.blogspot.com/

    ResponderExcluir
  7. Gostei
    bem explicado!!
    bjjs
    :I:
    choocoberrybr.blogspot.com.br

    ResponderExcluir
  8. O.o me saalvoooouuu!! uahsuahsua
    >chiclete-decanela.blogspot.com

    ResponderExcluir
  9. Oh!!!
    Vou tentar separar!
    bjoss
    http://famousfashionchik.blogspot.com

    ResponderExcluir
  10. adorei o tut jackie =D pena que no meu blog fica uma porcaria =\
    pois jackie tem de ter cuidado com o spam!! =S
    beijos
    http://xicablog.tk/

    ResponderExcluir
  11. Adorei a dica, afinal o seu template é tão fofo, lindo.

    http://biancasaless.blogspot.com.br
    @bianquinhasales
    http://www.facebook.com/biancasaless

    ResponderExcluir
  12. Jackie, você foi plagiada! Olha: http://bora-plagiar.blogspot.com.br/2012/05/algumas-imagens-uteis-para-seu-blog.html
    Horrível!
    PS: Esse tuto é muito cobiçado e o resultado é muito lindinho e perfeito! Arrasou como sempre, flor!
    bibiworldfun.blogspot.com

    ResponderExcluir
  13. Sim, sim fica diwo demaais <3 Amei seu blog,super diwo fofaa !! Tudo perfect demaais, virei fã *--* ja estou seguindo com maior prazer é cláros, como não seguir esse blog Mara?? Queria muito que você me ajudasse com a meta de 500 seguidores porque como alguns dizem, eu me importo sim com 1 seguidor a mais C; Fico super grata, cat !! Bezus Luuh
    Rawr Baby ~> teenstyle-official.blogspot.com

    ResponderExcluir
  14. Finalmente achei esse tutorial :D
    e ainda é bem explicado
    hehe'
    bjjs
    choocoberrybr.blogspot.com.br

    ResponderExcluir
  15. Muito bom o tuto Jackie! Vou fazer.
    Aaaaaaaaah, eu sonhei com você dona Jackie! KKKKK' Eu sonhei com você e nem tô acreditando.
    Batom De Framboesa

    ResponderExcluir
  16. Não consegui,snifsnif
    http://fashiongirloficial01.blogspot.com.br/

    ResponderExcluir
  17. Nossa é ótimo esse tutorial e deixa o blog muito mais lindo! :j:
    brilhants.blogspot.com

    ResponderExcluir
  18. Adoro esse tutorial da um efeito lindo no blog *-*


    Go Belezando

    ResponderExcluir
  19. :i: eu nao consegui , pois nao acho isso:.main-inner .column-center-outer {
    background: $(post.background.color) $(post.background.url) repeat scroll top left;
    _background-image: none;
    } :(

    ResponderExcluir
    Respostas
    1. Talvez pq vcs já mexeram nessa área do template ou não usam o theme viagem (foi o único que testei).

      Excluir
    2. ué não sei então Jackie, tu consegui para todos os modelos? por favor :(

      Excluir
    3. O único modelo que eu gosto de mexer é o viajem, justamente pq acho mais fácil de personalizar e tal's... Os outros eu não tenho nem vontade de testar :c

      Excluir
    4. É, eu também não achava, mas mudei meu modelo para o viagem e achei. Acho que é isso!
      Bjs, amei o tuto!

      www.blog-dreamsofagirl.blogspot.com

      Excluir
  20. Jackie , voce gostaria de participar da minha elite de afiliados ?
    isabellaandraskipink.blogspot.com

    ResponderExcluir
  21. Oie Jack, gostaria te te avisar que eu deixei uma mensagem no blog uma pequena borboleta , pq eu achei um post que ela colocou no mesmo dia que eu trocando a mensagem mas copiando o link.
    detalhe nao me colocou os creditos.
    Fiquei chateada afinal fiquei a tarde inteira preparando esse post.
    obrigado pela sua atençao ese preferir pode eliminar a mensagem.
    bjs

    ResponderExcluir
  22. Oi flor!
    Amei o tutorial :K:
    Vou tenta fazer ele lá no blog :D
    Seguindo.

    Bjs
    justgloss.blogspot.com

    ResponderExcluir
  23. nossa fica lindo o blog com as areas de postagens separadas =) e você como sempre ajudando suas blogueiras .. por isso é a Blogueira preferida =)
    Beijinhoooos
    :k:

    ResponderExcluir
  24. Jackie duas coisas, primeira que eu amei esse tutu! Eu usei no meu blog e ficou d+! Segunda coisa é que eu gostaria de saber como colocar uma imagem do seu blog ou de outro blog na postagem? Explicando: nessa postagem você colocou o início de uma postagem para intendermos o que você estava falando, certo? então como eu faço esses tipos de imagem? Manda um comentario no meu blog explicando ou faz um tutorial aqui no blog?

    http://liberdadedosmeusatos.blogspot.com.br/

    http://discipulandocoracoes.blogspot.com.br/

    ResponderExcluir
  25. Super útil esse tutorial , acho q o design do blog fica bem melhor com os post separados .

    Beijos ,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br/

    ResponderExcluir
  26. oi jackie!
    eu queria saber se para colocar imagem ao invés de borda arredondada é só trocar o background branco pelo url da imagem.
    seu blog é um doce :3
    bjos

    ResponderExcluir
  27. @Mel Gilberto Sim. Mais no caso a imagem ficaria na área da postagem inteirinhaa, dependendo da imagem (não aconselho)

    Beeeijus e brigada (:

    ResponderExcluir
  28. Usei ficou lindo e super fácil =)

    ResponderExcluir
  29. UHUUUU OBRIGADA MESMO! MORRI MESMO POR ESSE TUTORIAL =)

    ResponderExcluir
  30. OMG - você salvou minha vida - ah teeeeeempos procurando esse tuto ... qe perfeito *o* .. O design fica muito mais bonito assim ...

    http://lembrancas-apagadas.blogspot.com.br/

    ResponderExcluir
  31. Oi jackie tudo bem?:c: sabe o que eu quero mt saber , como vc criou mais de 20 páginas extras pro seu blog , pq até onde eu consegui foi 20 páginas , eu pus joguinhos no meu blog aprendi aqui no seu obrigado querida , em breve vou fazer um post indicando seu blog ok? bjinhos http://licia-carla.blogspot.com.br/

    ResponderExcluir
  32. A,ei a tuto!!!!
    Bjus





    Www.mundodebolinhas.com

    ResponderExcluir
  33. Amei, Amei, amei *-*

    http://cleciasz.blogspot.com.br/

    ResponderExcluir
  34. Amei ! mas eu ja mudei o codigo dessa parte, o que eu faço pra separar ?

    http://cherrysundaeoficial.blogspot.com/

    :j:

    ResponderExcluir
  35. Se vc já modificou essa área do template, não sei nem como te ajudar :(

    ResponderExcluir
  36. Jackie do céu!
    Me ajuda!
    Tipo, quando eu vou trocar a cor da sidebar pra transparente, ela fica cinza!
    No momento estou usando o "Visualizações dinâmicas".

    E mais:
    - Quero colocar uma "cor" atrás da data.
    Muito obrigada.
    - E quero um gadget que nem você nem aquele "Me encontre".

    Muito, muito obrigada!

    Blog: www.anabacanaacarolina.blogspot.com

    ResponderExcluir
  37. Jackie! Como se deixa mais perto do banner? Eu não sei :a:

    ResponderExcluir
  38. @Isadora do cabeçalho??
    no meu caso uso este tutu aqui>>http://www.spaziodm.com/2011/12/dois-tutoriais-em-1-so-confira.html

    ResponderExcluir
  39. Não tem o código no meu html,por favor me ajude alguem!! www.camila-brothers.blogspot.com

    ResponderExcluir
  40. nao tem o codigo no meu,como eu faço socorroo!!!!!!! www.camila-brothes.blogspot.com

    ResponderExcluir
  41. Não tem esse código no meu theme, será que é possível fazer de outra forma? Eu uso o Modelo Awesome Inc. :i:

    Beijinhos!

    ResponderExcluir
  42. Não consigo !!!!!!!! :h:

    ResponderExcluir
  43. Adorei! Usei esse tutorial daqui para meu proximo layout. ;)

    ResponderExcluir
  44. Jackie, me ajuda ahusahs não arredondou as bordas.. tipo "Puutz, é a única coisa que e preciso" ajuda, nem aumentando o número láa?

    http://www.cuteland-oficial.blogspot.com.br

    ResponderExcluir
  45. Eu achei que tem muita borda, mas eu editei e diminui! Achei lindo o tuto! Estou usando!

    http://meninablogueiratutoriais.blogspot.com/

    ResponderExcluir
  46. @Camila Vieira Eu acho que tem que usar o modelo viagem! '--' Mas é só você editar no código da postagem no seu modelo!

    ResponderExcluir
  47. Obrigada *-* Ajudou muito, fora que o resultado ficou lindo ^^
    garotasvirtuaisvg.blogspot.com.br

    ResponderExcluir
  48. Deu certo e o resultado ficou lindo, até que enfim consegui tirar aquele horror de todas as postagens coladas no meu blog! Estava procurando a muito tempo esse tuto pois todos que eu fazia dava errado e não funcionava, gosto muito do seu blog seus tutorias sempre me ajudam muito! Muito obrigado!
    http://refugiodeprincesas.blogspot.com.br/

    ResponderExcluir
  49. oi jackie, eu tava querendo que a data ficasse dentro do post, ou seja, dentro do "quadrado" do post e tal, tem como? no meu blog o formato dela é o normal: (dia da semana), (dia) de (mês) de (ano)

    ResponderExcluir
  50. @moderação poldsktalvez até tenha como (mexendo no HTML e tals), mais eu não sei... :(

    ResponderExcluir
  51. Procurei esse tutorial em varios blogs e nem um deu certo então encontrei o seu e ficou perfeito!!
    obrigada flor \☺/

    rarosej.blogspot.com.br

    ResponderExcluir
  52. @Barbie Isabella Andraski

    Oi flor, é só substituir pelo código que aparece no seu mesmo, o meu eu fiz isso e deu certo.
    Se quiser ajuda, o email:
    layrakauana@gmail.com

    Adorei o tuto, e estou usando no meu blog: layrakauana.blogspot.com

    ResponderExcluir
  53. Jackie Eu procurei por .main-inner .column-center-outer {
    E não achei nada !!
    Oque eu faço? Desde Já agradeço,por favor estou precisando desse tutu ""
    Amei*--*Seu blog é lindo e muito criativo eu sei onde eu encontro tudo é aqui aqui tem tudooooo


    ResponderExcluir
    Respostas
    1. Linda se vc já modificou essa área do template, não posso te ajudar...
      Mas pra todos os efeitos manda o link do seu blog pra mim dar uma olhada ~~ quem sabe eu não possa te ajudar ;D

      Excluir
  54. Jackie, me ajuda!
    Estou usando esse seu tutorial e deu tudo certo, porém, os links para home e postagens mais antigas desapareceram! Me ajuda!

    ResponderExcluir
  55. Poor favor quero uma ajuda não conseguir achar nadaa aquue
    nem noo meuu blog neem no meu blog teste. O que eu faço ?

    ResponderExcluir
    Respostas
    1. Você só vai conseguir achar, quando utilizar um dos templates padrões do blogger, mais especificamente o viagem (não testei nos outros).

      Excluir
  56. Vomitando arco-íris com esse tutorial! Obrigado mesmo! Bjo ;*

    ResponderExcluir
  57. Amei o post estava procurando á tempos e nunka achei obgada ajudou muitoooo vlw ah se puder seg o meu blog? to seguindo o seu!http://jujuba-teen.blogspot.com.br/

    ResponderExcluir
  58. hellou, gostaria de saber como aumento o tamanho da área das posts separadas, pode me ajudar? Obrigada.

    ResponderExcluir
    Respostas
    1. a desculpe a demora pra responder :c

      enfim... é só alterar o numero 15

      Excluir
  59. Fiz no meu blogs deu certinho obrigada... bjuss =^,^=

    ResponderExcluir
  60. Posso fazer isso com as tags, e gadgats??????

    ResponderExcluir
  61. Paola é possível mas não com este tutorial

    ResponderExcluir
  62. Meus Parabens *-*

    Seu Blog é uma Maravilha ((:

    ResponderExcluir
  63. Ótimo tutorial,realmente me salvou!

    ResponderExcluir
  64. Oi Jackie adorei o tutorial, mais comigo não funcionou, tem como me da uma ajuda ??? beijoos adoro seu blog !!!!
    http://queenthemoment.blogspot.com.br/ ♔

    ResponderExcluir
    Respostas
    1. HOyy guria :3
      Mas seu template já tem as postagens separadas ??? O.o

      Excluir
  65. Obrigada... Estou aproveitando muito seus tutoriais.

    Beijos

    ResponderExcluir
  66. E pra quem já tiver mexido nisso, e não encontrar esse código? :c

    ResponderExcluir
    Respostas
    1. Daí eu não vou conseguir ajudar :c
      já que eu não sei quais foram as modificações.

      Excluir
  67. Jackie e como eu faço pra subir ? AJUDA POOOR FAVOR !! :(

    ResponderExcluir
    Respostas
    1. procure por:
      .main-inner .column-center-outer {

      abaixo cole:
      margin-top: -100px

      E vai mudando a numeração conforme vc quer ;D

      Excluir
  68. o unico blog que eu consegui entender tudinho ! parabens jackie,seu blog é perfeitinho mesmo *-* sempre sigo seus tutoriais :D
    http://maniadeallstar.blogspot.com.br/

    ResponderExcluir
  69. Obrigada Flor!! Ficou lindo meu blog!!

    http://truquesparadivas.blogspot.com.br/

    ResponderExcluir
  70. Obrigado!!!!
    http://agnesvata.blogspot.com.br/

    ResponderExcluir
  71. Como me ajudou estou tutorial! Obrigado.
    Muito simples e bem explicado.
    Já está no layout q estou tentando "criar", thanks!

    ResponderExcluir
  72. Oi eu queria saber se você pode me mandar o link da html que vc usou para fazer a caixinha colorida a onde vc escreveu "Tipo ''muuuuitas'' pessoas estão me pedindo este tutorial O.o Atendendo a vários pedidos aqui está (:" esta em baixo da imagem.

    obrigada

    raah_varella@hotmail.com

    bjs

    ResponderExcluir
  73. Omg, deu direitinho como vc ensinou!
    Acho q só pega no modelo da viagem, o meu era outro e não achei o código, mudei para o viagem e consegui.
    ótimo tuto! Eu amei! Ajudou muito!
    Beijos!

    www.blog-dreamsofagirl.blogspot

    ResponderExcluir
  74. Oi,oi eu amei seu tutorial mas quando eu procuro o código da 0 de 0 :(
    Você pode me ajudar?

    ResponderExcluir
  75. Amei o tutu* pena que o meu não deu para modificar!
    Ma logo menos irei mudar o designer do blog e irei usar...
    Obrigada!!

    http://sweetdreambbc.blogspot.com.br/

    ResponderExcluir
  76. Ajudou muito :) Eu diminui bem mesmo coloquei 10px, pq só queria q ficasse separado!
    Faz um tuto de como fazer essa estilo de área de comentários, ou parecido??

    www.amantedemakes.blogspot.com

    ResponderExcluir
  77. não consigo usar nenhum dos seus tutoriais , toda vez q pesquiso um código no meu HTML , ele não encontra .. :(
    O que eu faço ??

    ResponderExcluir
  78. To tentando no Meu Blog mas como a um tempinho mudou o troçindo da edição eu não consigo fazer mais seus tutos, pode manadar um tuto de como voutar pro antigo trocinho ou colocar tutos com o novo Trocinho?

    ResponderExcluir
  79. Ameeiiiii !!! Ficou lindo no meu blog ! Agora só falta ajustar as larguras !! Beijos...

    ResponderExcluir
  80. Obg, ajudou muito no meu blog, eu criei ele hoje e ainda estou fazendo meu propio layout. Obg Jackie,

    ResponderExcluir
  81. Obrigada meeesmo, amiga!
    Estava precisando disso haha

    ResponderExcluir
  82. Seria ótimo se existisse essa tag (.main-inner .column-center-outer {) no blog em sua nova interface.Meu template é o padrão do Blogger. 100 Chance.

    ResponderExcluir
  83. Amei Me Ajudou Muito http://criatividadesnamoda.blogspot.com.br/

    ResponderExcluir
  84. Olá Jackie! Eu gostaria de usar a fonte "a song for jennifer" para o número de comentários mas não consigo, será que você pode me dar uma luz?

    ResponderExcluir
    Respostas
    1. Só seguir esse tutorial aqui Van, http://www.papogarota.com.br/2013/10/como-personalizar-os-comentarios-do.html

      (:

      Excluir
  85. finalmente alguém que explica direito.Parabéns!! Ficou lindo.
    Veja:http://dicasdeviagensporlucianamileipe.blogspot.com/

    ResponderExcluir
  86. Adorei ajudou muito.
    http://felicissimum.blogspot.com.br/

    ResponderExcluir

.