Separação entre as postagens do blog

Separação das postagens do blogUma coisa fácil de fazer e que melhora muito a aparência do blog é colocar uma separação bem defina entre as postagens. Você já reparou que alguns blogs fica difícil ver claramente onde é o inicio e o final de cada postagem? Então vamos dar um espaço entre as postagens e colocar uma linha para separá-las melhor.
Entre na pagina editar html e procure por .post{....} se não encontrar coloque:

.post{padding-bottom:5px; border-bottom: 2px dashed #990000; margin-bottom:30px}

Mas se encontrar apague ou altere os valores, veja o que faz cada parte desse código:
padding-bottom:5px
margem entre a linha tracejada (borda) e o final da postagem ou comentários

border-bottom: 2px dashed #990000
estilo, cor e espessura da borda, vejam aqui como alterar as bordas

margin-bottom:30px
margem depois da borda, esse é o espaço que ficará vazio entre uma postagem e outra.

Porém se já tiver algo no seu html igual a isso ou seja .post{...} veja se dentro dele já tem alguns desses valores definidos border, margin e padding, se tiver pode só alterar ou inserir os valores que mostramos acima separadamente. Depois clique para visualizar o blog e se ficou do jeito que você queria clique para salvar as alterações.

Agora já está tudo pronto o seu blog tem uma melhor separação entre as postagens, assim ninguém ficará perdido procurando onde começa ou termina cada um dos textos do seu blog.

Veja também:
Código das Cores
Deixar o visitante escolher a cor de fundo do blog
Anúncios no blog
O que não fazer ou colocar no seu blog
Acesso negado ao perfil blogger
Imagem na barra de endereços
Botões fixos no canto da pagina

218 comentários:

  1. Dica muito útil. Pode parecer simples, mas tem blogs que fica muito "confuso" quando termina e quando começa uma postagem. Já coloquei no meu Blogger. Um abraço. Drauzio Milagres.

    ResponderExcluir
  2. OI FABIANO, COMO EU COLOCO UMA FIGURA OU IMAGEM ANTES DAS PALAVRAS, OU SEJA TIPO ESSE, A ESTRELA DOS TOP PARCEIRO, GOSTARIA DE COLOCAR NOS MEUS MARCADORES E EM OUTROS CANTINHO. amigadaeducacao.couto8@gmail.com, ESPERO SUAS INSTRUÇÕES. GRATA, JOELMA COUTO

    ResponderExcluir
  3. sobre colocar a estrela ao lado dos links veja aqui
    http://www.dicasparablogs.com.br/2008/07/imagem-ao-lado-do-texto-ou-link.html

    ResponderExcluir
  4. Amigo, queria fazer um pedido, queria que posatasse, um tuto como esconder codigo de fonte do template do blog, (blogger)!!
    Flw!!

    ResponderExcluir
  5. Super Exdowns™
    tem varios códigos para bloquear o botão direito do mouse, teclado... mas todos deixam alguma falha, eles só conseguem impedir os modos mais simples de copiar um código de fonte. Mas se quiser usar use nossa pesquisa no inicio da pagina e encontrará vários códigos desse tipo, mas infelizmente por enquanto ainda não vi nenhum que fosse 100% seguro.

    ResponderExcluir
  6. Fabiano Roberto" Existe um negocio pra esconder o codigo de fonte do template, pra ninguem copiar o codigo de fonte, eu ja pesquisei na net e não ensina, conheço blog que os codigo de fonte do template ta escondido, so aparece alguns codigos!

    ResponderExcluir
  7. Boa postagen estou sempre aki aprendendo novas coisas . Esta postagen foi um peqeno detalhe mas q fas uma grande diferença . Vlw

    ResponderExcluir
  8. Que barato seu blog. Dicas muito uteis. parabéns pela ideia.
    Visite meu blog.
    http://caminho-das-linhas.arteblog.com.br/

    ResponderExcluir
  9. Muito bom, como colocar uma imagem na postagem?

    ResponderExcluir
  10. Sou iniciante em blogs. Antes de começar meu blog fiz uma pesquisa de onde poderia ter suporte. Dicas para blog foi o que achei de melhor. Parabéns.

    ResponderExcluir
  11. Rodolfo Espinosa Bueno
    na pagina de postagem tem um icone de uma paisagem é só clicar nele

    ResponderExcluir
  12. Muito bom o teu post, tenho uma pergunta eu queria separar o rodape do meu feed ele fica tao enconstado no post que parece que faz parte, o postar rodape do feed eu escreve; "esse artigo pertence ao blog Aprenda PC LTDA" eu queria saber alguma forma de colocar uma linha separando o post do rodape que eu criei para ninguem copiar meu post. VALEW.

    aprenda-pc-ltda.blogspot.com

    ResponderExcluir
  13. Henrique
    na pagina onde escreveu esse texto para aparecer no final do feed tente clicar enter para pular uma linha antes do inicio, se não der certo coloque isso
    <p>&nbsp;</p>

    é um parágrafo em branco

    ResponderExcluir
  14. Muito obrigado mais uma vez.FALOW continue assim.

    ResponderExcluir
  15. Blz sobre separação de postagem tenho uma pergunta, como faço para o titulo das postagens ficar no centro, existe algum codigo que faça isso?

    ResponderExcluir
  16. Henrique centralizar o titulo varia um pouco, mas na pagina editar hmtl procure por h2{.. ou h3{....

    e coloque text-align:center; faça o teste para saber em qual deles é o correto. se já tiver text-align:... apague e coloque esse que falei no lugar.

    ResponderExcluir
  17. Obrigado, eu vi esse comentarios e eu consegui fazer o que você falou nesse ultimo, sempre vejo o seu blog para ver se tem novidades eu aprendi muito continue assim.

    ResponderExcluir
  18. Ótima dica, acabei de colocar no meu blog e ficou muito bom a separação das postagens, vale a pena. Um grande abraço.

    ResponderExcluir
  19. Caro Fabiano,

    Vc está sempre me ajudando desde o início (2008). Assino sua newsletter e recebo todas as novidades por e-mail.

    Seguindo sua dica, separei as postagens com linha sólida e ficou excelente. Obrigadíssima!

    Sonia Boni

    ResponderExcluir
  20. Nicoly Gonçalves Crispi

    pode usar em novas postagens ou editar as anteriores

    ResponderExcluir
  21. gostaria de criar um rodapé para meu blog, você tem alguma sujestão.

    gostaria de saber como eu faço para meu menu fica parecido com o seu, quando alguem colocar o mause em cima mudar de cor..

    ResponderExcluir
  22. Olá, gostaria de saber como faço para minhas postagens ficarem com uma margem maior a direita, elas tem subido em cima do rodapé lateral, ultrapassando um pouco a área de postagem.
    Obrigada

    ResponderExcluir
  23. para colocar margens a direita você pode colocar margin-right:5px, claro que com o valor que achar melhor para o seu modelo

    ResponderExcluir
  24. olá queria saber como faço para postar mensagens e foto ok,, obrigado trabalho fantastico parabens,,

    ResponderExcluir
  25. para postar foto é só clicar no icone de imagem na barra de ferramentas na pagina de postagem

    ResponderExcluir
  26. Oi...

    Gostei da dica, foi muito útil para o meu blog. Todavia, essa linha que ajuda a organizar os posts traça todo o texto em baixo, ou seja, fica do tamanho que o texto ocupa, então, eu queria diminuir ela, tipo, que ela ficasse só a metade do seu tamanho, mais ou menos pareceido com a linha que separa as referêcias que tem no fim das páginas de alguns livros.

    Se puder ajudar agradeço.

    ResponderExcluir
  27. é possivel usar uma imagem para a separação das postagens, em vez de fazer a borda coloque isso no código

    background-image: url(endereço da imagem);
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 50px;

    apenas precisa ajustar o padding para a imagem não ficar por baixo do texto, vou fazer um tutorial sobre isso mais detalhadamente

    ResponderExcluir
  28. Eu testei o código que tu me mandou. A imagem que inseri no endereço url não aparece embaixo de todos os textos, só de alguns, e ainda, fica aparecendo e desaparecendo, muito estranho. Mas de qualquer modo, obrigado.

    ResponderExcluir
  29. Olá Fabiano,eu gostei muito da sua dica sobre separar as postagens,mas no caso no meu blog só aparece embaixo da postagem por quem foi feito e quantos comentários eu ja coloquei mais e não aparece nada,então queria sua a ajuda para tirtar essa borda ou para conseguir fazer com que eu consiga botar outras coisas além de quem a postou e quantos comentários!Abraços

    ResponderExcluir
  30. Ícaro Nunes


    aqui mostra como enviar para Redes Sociais
    mas você pode usar isso para colocar qualquer outra coisa

    ResponderExcluir
  31. Não adiantou nada!Você poderia me dizer então como tirar essas separações?

    ResponderExcluir
  32. Estava precisando disso no meu blog
    vlw mesmo!

    ResponderExcluir
  33. Adorei o blog, dicas muito úteis, mas com esse post eu só consegui colocar as linhas no final da postagem( entre as postagens) mas queria saber como colocar linhas de separação entre o título e post, no final do post e entre as colunas da barra lateral, como nesses blogs: http://bonequinhadeseda.blogspot.com/
    http://comcheirodeestrelas.blogspot.com/
    Desde já, obrigada! :D

    ResponderExcluir
  34. do mesmo jeito que criamos uma borda usando border-bottom: 2px dashed #990000; podemos criar outra com border-top:2px dashed #990000; isso fará uma borda acima, ou simplesmente

    border: 2px dashed #990000; que faz uma borda em todos os lados(caixa) da postagem

    ResponderExcluir
  35. Olá, Fabiano!

    Valeu pelo tutorial! Achei um pouco confuso, mas apliquei num blog de testes e deu tudo certo.

    Abraço!

    ResponderExcluir
  36. mexer com html, css sempre é um pouco confuso no inicio, mas você se acostuma

    ResponderExcluir
  37. olha eu tentei fazer oque voc disse, mais eu não consegui, eu acho qe tentei umas 50 vezes :/ poxa eu preciso dar espaço entre as postagens mee ajuda :S
    beeeijos

    ResponderExcluir
  38. Jéssica, entrei no seu blog e parece que tem algum erro no template, ficou um espaço bem grande depois da ultima postagem, mas não tem como dizer onde é o problema pois o html aparece diferente na pagina do blogger

    ResponderExcluir
  39. então uque eu faço ? já tentei em outros sites mais não consigo :z

    ResponderExcluir
  40. entre na sua pagina editar html e procure por

    body .main-inner .Blog {
    padding: 0;
    margin-bottom: 30em;
    background-color: transparent;
    border: none;
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    .main-inner .section:last-child .Blog:last-child {
    padding: 0;
    margin-bottom: 30em;
    }


    apague esse margin-bottom: 30em;(aparece duas vezes)


    outra coisa, veja aqui:
    .date-outer:last-child {
    margin-bottom: 3020px

    apague esse margin-bottom: 3020px para ver se resolve.

    faça esas coisas uma por vez e visualize o blog para ver se nota a diferença

    ResponderExcluir
  41. Bom dia!!

    Eu tentei e não consegui. Achei o cod acima .post{padding-bottom:5px; border-bottom: 2px dashed #990000; margin-bottom:30px} alterei mas não mudou nada. Será que fiz certo? Você pode me ajudar.
    Desde já fico agradecida.
    http://layoutsay.blogspot.com/

    ResponderExcluir
  42. Arte&Sabor

    você precisa fazer algumas postagens no blog e colocar alguns acessorios nele para facilitar a visualização e edição

    ResponderExcluir
  43. Me ajuda...
    Entre o título e a postagem está um espaço de mais ou menos 20 cm. Como faço pra diminuir esse espaço uma vez que na edição da postagem mostra que está norma?

    ResponderExcluir
  44. Joao N
    qual blog está com esse problema? entrei no seu blog e parecia tudo normal

    ResponderExcluir
  45. Fernando, obrigado pela atenção.
    Eu futuquei um bocado e acabei descobrindo como resolver.
    valeu!

    ResponderExcluir
  46. oi quero por uma figura como borda entre as postagens como posso fazer isso?
    meu email raquelfaleiro@terra.com.br o endereço do meu blog é http://www.raquelfaleiropatch.blogspot.com/
    da uma olhada pra mim por favor, quero por a imagem aonde tem aquela linha branca e queria tbm colocar o nome do blog mais dentro da caixa do titulo mas não consigo, podes me ajudar?
    raquel faleiro

    ResponderExcluir
  47. Raquel Faleiro


    na pagina editar html procure o trecho
    .post-footer {
    margin: 20px -2px 0;
    padding: 5px 10px;
    color: #777777;
    background-color: transparent;
    border-bottom: 1px solid #f1f1f1;
    line-height: 1.6;
    font-size: 90%;
    }

    se apagar a linha border-bottom: 1px solid #f1f1f1; sumirá aquela borda.

    para colocar uma imagem de no final da postagem use esse código:

    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(fundofixo.jpg);

    veja aqui com mais detalhes

    Posicionar imagem de fundo

    ResponderExcluir
  48. Fabiano criei um blog teste pra ver como ia ficar no meu blog e ficou assim, da uma olhada por favor e me diz como posso deixar a figura (barrinha) depois daquela caixa
    ende:http://raquelfaleiroteste.blogspot.com/
    fico aguardando
    raquel faleiro

    ResponderExcluir
  49. Raquel Faleiro
    não entendi sua duvida, qual barrinha?

    ResponderExcluir
  50. acabei de te enviar um email com a imagem do que eu quero fazer.
    mas resumindo, no lugar daquela barra que eu tirei e que tu ensina a colocar eu quero colocar uma figura, no meu caso esta aqui
    http://lh5.ggpht.com/_Mfrlm6XPTYA/TLJSemHUSZI/AAAAAAAADXA/Mn2S0bQIoOo/1645687qoi5xea2kb.jpg
    mas qdo coloco o codigo que tu mandou ela fica em por traz do ro rodaé da postagem, e eu não sei como colocar abaixo do rodapé.
    agradeço a ajuda.
    raquel faleiro

    ResponderExcluir
  51. Raquel Faleiro


    entre na pagina editar html e procure por:
    .post-footer {
    margin:10px -0px 0;
    padding: 30px 10px;
    color: #666666;
    background-color: #f9f9f9;
    ...

    troque a linha padding: 30px 10px; por essa aqui:
    padding: 30 10 70 10px;

    onde está o valor 70 tente alterar até a imagem ficar com a distancia que você deseja

    ResponderExcluir
  52. Oi agora acertei uma coisa e ficou outra pra traz, o espaço entre o rodapé e a postagem ficou muito grande e não sei como diminuir olha lá, por favor e veja como ficou:http://raquelfaleiroteste.blogspot.com/
    e eu preciso que esta imagem fique transparente pq vou usar em outro blog cujo fundo é cinza, podes me ajudar, sei que estou te incomodando um monte mas não sei a quem recorrer.
    obrigada
    raquel

    ResponderExcluir
  53. então precisa salvar a imagem e reduzir o tamanho dela

    ResponderExcluir
  54. Só quero deixar o meu agradecimento. Estava a horas querendo saber como regular a distancia entre uma postagem e outra e como separar as postagens. Com este post consegui matar dois coelhos com uma cajadada só... Obrigado.

    ResponderExcluir
  55. ei Fabiano eu nao conseguir achar esse codigo! tem como da uma ajuda?
    esse e meu blog, obrigado http://www.blogfragozo.com

    ResponderExcluir
  56. Boa noite preciso de uma dica,ñ sei pq meu blog esta com um espaço enorme entre o post mais recente e o anterior,já o restante esta normal.Gostaria de saber onde posso mudar isso.Desde ja agradeço a atenção,e mais uma vez parabens pelo blog,tem mtas dicas importantes.Meu email é vancrick@yahoo.com.br Obrigado

    ResponderExcluir
  57. veja esse trecho do seu html

    .post-outer {
    background-color: #ffffff;
    border: solid 1px #dddddd;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -goog-ms-border-radius: 5px;
    padding: 15px 20px;
    margin: 0 -20px 20px;


    altere os valores deste trecho final por

    padding: 1px 20px;
    margin: 0 -20px 2px;

    ResponderExcluir
  58. boa tarde parceiro...
    no meu blog nao encontrei nenhum dos 2 codigos ;/

    pq isso?
    abraços

    ResponderExcluir
  59. o código .post se não encontrar você pode criar no html do seu blog, logo depois de body{....}

    ResponderExcluir
  60. consegui...mais só ficou um tracejado vermelho
    - - - - - - - - - - - -

    tipow assim
    quero um espaço maior entre uma postagem e outra..oq faço?

    ResponderExcluir
  61. consegui colocar uma imagem...mais ela ta ficando no centro..quero colocar de uma ponta a outra..qual o codigo pra por? ao inves de center

    abraços
    vlw ae

    ResponderExcluir
  62. nao eh bem centralizar...quero colocar ela de uma lado ao outro na coluna do meio..pq ela jah está centralizada...abraços

    ResponderExcluir
  63. nao foi bem isso q perguntei....agora nem minha imagem ta querendo ficar...soh tem traçejados ;/
    e fiz igualzinho aí ;/

    ResponderExcluir
  64. como que eu faço pra ao inves de ficar os tracejados separando uma postagem da outra, eucolocar uma imagem?

    boa noite

    ResponderExcluir
  65. veja aqui como Posicionar imagem de fundo, então pode retirar o código da borda e usar uma imagem, se a imagem ficar por baixo do conteudo aumente o valor no padding-bottom:5px

    ResponderExcluir
  66. vc não está entendendo minha pergunta ;/
    eu nao to querendo colocar imagem de fundo....
    eu quero separar as postagens uma da outra...
    entra no meu blog e ver, entre a linha tracejada e o titulo do post tem um espaço em branco entre eles..quero colocar uma cor verde igual ao fundo do blog...entendeu? abraços

    ResponderExcluir
  67. vi a linha tracejada no final da sua postagem, tem que achar o código dela no seu html e alterar para colocar uma imagem de fundo como mostramos no link no outro comentário

    ResponderExcluir
  68. e qual seria o codigo dela? tem alguma ideia?

    ResponderExcluir
  69. qual código? o da imagem? você tem que hospedar uma imagem e pegar o código

    Hospedagem de Imagens

    ResponderExcluir
  70. eu sei q tem q hospedar a imagem
    mais aonde eu colocaria o link da imagem?
    eu nao sei ;/

    .post{padding-bottom:5px; border-bottom: 2px dashed #990000; margin-bottom:30px}

    ResponderExcluir
  71. veja neste link o código da imagem de fundo e como posicionar Posicionar imagem de fundo

    você tem que adicionar um trecho de código neste que falou

    ResponderExcluir
  72. Cara no meu modelo funciona assim:
    dia 27 eu faço 2 posts eles vão ficar juntos, no dia 28 eu venho e faço outras duas postagens elas vão ficar juntas mais separadas das do dia 27
    Entendeu? O blog só separa as postagens de dias diferentes e deixa junta postagens de dia iguais

    Para resolver isso eu fui nesse código a baixo e mudei onde esta 30px era 1 e mudei a cor no outro código.
    Ate ai blz ta funcionando, mas tem um problema meu blog não pode ter imagem de fundo só cor porque se não da para ver a linha e fica muito feio, e se em vez do código da cor eu colocar para ficar transparente ela fica da cor do post e nao do fundo do blog!


    troca o tamanho

    .post-outer, .inline-ad {
    border-top: 30px solid $(post.border.bevel.color);

    troca a cor



    Vou postar uma foto para vc entender!
    Se olhar agora no blog quase não percebe o fundo e preto e o separador tb mais o fundo do blog tem lista e entre algumas postagens vc percebe que não tem

    http://lh5.ggpht.com/_9IFdlcSdB0Q/TPE9FU1mPBI/AAAAAAAACAY/bKI_qxQfATw/s640/imagem.JPG

    Ta vendo onde esta em vermelho que seja transparente para o fundo do blog e não para postagem!

    meu blog e o http://www.fazendohora.com/

    ResponderExcluir
  73. essa separação é causada pelo anuncio do adsense que aparece entre as postagens, mas o que você queria fazer? achei que a separação das postagens está muito boa.

    ResponderExcluir
  74. PH eh assim msm que quero deixar o meu blog...nessa separação msm...vou tentar aqui..vle

    ResponderExcluir
  75. no meu blog nao axei esse codigo
    .post-outer, .inline-ad {
    border-top: 30px solid $(post.border.bevel.color);

    ;/

    pq?
    to ficando fadigado com isso ;/

    ResponderExcluir
  76. PH me passa esse codigo todo ae?

    .post-outer, .inline-ad {
    border-top: 30px solid $(post.border.bevel.color);

    ResponderExcluir
  77. Fabiano tem como me ensinar a fazer uma separação de postagem que nem no site do PH,sendo q no lugar do preto o meu vai ser verde igual ao fundo do meu blog...abraços..espero resposta

    ResponderExcluir
  78. não é para alterar o código da imagem de fundo, mas acrescentar o código de uma imagem de fundo na parte que faz a separação das postagens, se quiser escreva para meu email

    ResponderExcluir
  79. parceiro eu quero uma parada tipow essa aqui

    .separator {
    background: url(http://img263.imageshack.us/img263/2200/bordab.png) bottom left repeat-x;
    height: 0px;
    padding: 20px;
    margin-bottom: 15px;
    }

    mais eu n to sabendo aonde coloca,pq ta ficando errado no meu blog...estao ficando 2 colunas verdes,uma no meio do post e outra no final do post,esse no final do post ta certo,como faço pra tirar a q fica no meio?

    olha nesse link como fica
    http://img542.imageshack.us/img542/2174/blogf.jpg

    abraços

    ResponderExcluir
  80. troque o padding:20px por padding-bottom:30px ou mais até o ajuste ficar com, se quiser pode retirar o diminuir o margin-bottom

    ResponderExcluir
  81. Fabiano Roberto: ele não e só pelos anúncios não quando tem mais de uma postagem em um mesmo dia ela fica assim tb

    Ela esta ótima o problema e que eu quero colocar um fundo no meu blog e seu eu colocar esse fundo a separação vai aparecer! Entende!

    Nova imagem para ficar mais claro o que eu estou falando!

    http://lh6.ggpht.com/_9IFdlcSdB0Q/TPJZWnvl5XI/AAAAAAAACAo/RqpcoWgkpcY/s640/imagem%20de%20fundo.JPG

    -------------------------------
    Mp3 Samba e Pagode:
    Posso ajudar sim, no meu blog tb não tem esse código que o Fabiano Roberto ensinam a fazer eu achei o meu da seguinte maneira fui no editor de “Designer do modelo” e coloquei um cor na borda diferente das outras corres do blog, feito isso vai em “Editar HTML” e procura o código dessa cor! Pronto vc achou o código da sua divisória e podo mudar o tamanho dela!

    ResponderExcluir
  82. troquei e retirei o margin-bottom
    mais ta ficando a msm coisa ;/

    deve ter mais alguma coisa errada ;/

    ta osso

    ResponderExcluir
  83. PH
    procure no seu html por .date-outer:last-child {
    margin-bottom: 20px;


    e reduza esse valor, se quiser pode deixar 0

    ResponderExcluir
  84. Mp3 Samba e Pagode
    você fez comentários em muitas postagens diferentes sobre o mesmo assunto, está muito confuso achar suas perguntas.

    esse tutorial mostra como fazer a separação das postagens, se usar ela e acrescentar a imagem de fundo posicionada poderá usar a imagem como separador, só precisa achar o trecho certo no seu html(é o mesmo onde tem a borda entre as postagens)

    ResponderExcluir
  85. isso q ta osso de achar..o trecho certo no html ;/

    mais vlw ae pelas dicas...abraços

    ResponderExcluir
  86. Fabiano , muito boa noite! Com faço pra por um banner no espaço entre o post e os comentários?

    ResponderExcluir
  87. na pagina editar html se colocar o código do banner depois de post.body, ele aparecerá entre a postagem e os comentários

    ResponderExcluir
  88. Eu tente fabiano mas parece: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag "

    ResponderExcluir
  89. Fabiano até consegui colocaro banner, mas euqria que aparecesse apenas nas páginas individuais das postagens. Na verdade está aparecendo em todas as postagens antes do Jump link

    ResponderExcluir
  90. veja se não apagou algum simbolo por engano.. você abriu e não fechou alguma div

    ResponderExcluir
  91. Oi FAbiano...
    O espaço da postagem tem um tamanho MÍNIMO padrão?
    Ou seja, se escrevo um texto enorme, ele ocupa um espaço enorme e se escrevo uma frase de duas linhas simplesmente, ele não poderia ocupar somente o espaço de duas linhas?
    Tem como ajustar?

    ResponderExcluir
  92. Natália
    você está certa, o texto ocupa somente o espaço necessário para ele na postagem.

    mas a pagina continua até o final seguindo os gadgets.

    por exemplo numa postagem de um texto pequeno a pagina ficará vazia embaixo do post, porque é necessário mostrar todos os gadgets

    ResponderExcluir
  93. Me refiro ao espaço dentro da postagem...
    E não no restante da página.
    Visitei um site de mensagens, onde havia uma caixinha de link para cada mensagem (post), bem próxima a cada frase e, na página inicial havia por volta de 15 mensagens(frases),fazendo com que os posts acompanhassem a página pela quantidade de gadgets... Entendeu?
    Tem como fazer assim no Blogger?

    ResponderExcluir
  94. não sei qual espaço está falando? é entre o titulo e o texto do blog?

    ResponderExcluir
  95. Mais uma vez esse site me ajudou. Coloquei no meu blog e agora estou muito satisfeito. Grande abraço e obrigado.

    ResponderExcluir
  96. Fabiano esta separação pode ser colocada somente na página inicial?

    ResponderExcluir
  97. Natália
    na verdade essa separação é um estilo CSS (formatação) pode ser aplicada a qualquer parte do blog, por exemplo embaixo dos gadgets, ou titulos... enfim qualquer lugar

    ResponderExcluir
  98. muito bom todas as dicas...
    Obrigado!

    ResponderExcluir
  99. Eu usei esse codigo mas não ficou do jeito que eu queria,eu queria que cada postagem ficasse em uma janela, mas lá no meu blog só as postagens do mesmo dia que fica na mesma janela,e quando uso esse codigo só fica uma linha preta entre as postagens, como faço pra deixar cada postagem em cada janela ?

    www.pensamentonegritude.blogspot.com

    ResponderExcluir
  100. uma postagem e cada janela? quer deixar uma postagem só na sua pagina? isso é em configurações

    ResponderExcluir
  101. Você não entendeu o que eu quis dizer, as postagens do mesmo dia ficam desse jeito: http://migre.me/3XS3e mas eu queria que cada postagem ficasse em cada janela igual aqui: http://migre.me/3XS44

    ResponderExcluir
  102. Por favor me ajude, meu blog antes ficava separado uma postagem da outra, mas agora não, esta ficando tudo junto e muito confuso, não sei o que fiz pra isso acontecer. não encontrei no html essa .post{...} gostaria que vc fizesse um video se for possivel de onde esta esta parte do html. por favor me ajude !

    ResponderExcluir
  103. Rafael
    a imagem que usou como exemplo não apareceu...

    @вяυииαєωιℓℓιαм
    se não achou o .post pode colocar isso no html do seu blog para fazer a formatação...

    é junto com os outros codigos por exemplo body{... ou #main{.....

    ResponderExcluir
  104. Preciso de uma ajuda... Consegui colocar a linha separadora, porém ela não ocupa todo o post, fica uma margem da cor do fundo da postagem... como resolver isso?
    assim que tá:
    http://img819.imageshack.us/i/bordas.jpg/
    Muito obrigado!

    ResponderExcluir
  105. Bom, depois vejo se consigo mostrar foto, mas o caso eh o seguinte, a largura da linha q separa as postagens nao ocupa todo a área do post , ficando uma pequena margem tanto na direita quanto na esquerda. Desde já agradeço

    ResponderExcluir
  106. margens você pode retirar no estilo #main do seu blog na pagina editar html, procure por margin ou padding e diminua os valores...

    mas é complicado explicar assim podem ser outras coisas como imagens de fundo... ou a largura da coluna

    ResponderExcluir
  107. Vou explicar melhor, agora com fotos. Atualmente, está assim:
    https://lh5.googleusercontent.com/-PpVpGxTGGPI/TW7V8Em-LJI/AAAAAAAAALo/Y083mu3HkZs/s1600/border1.jpg

    Eu queria que ficasse assim:
    https://lh6.googleusercontent.com/--vSKqS8Ga3c/TW7V8gPloWI/AAAAAAAAALs/vWLnzSKoM94/s1600/border2.jpg

    Eu até consigo diminuir a borda do corpo da postagem, mas daí fica sem margem (recuo) entre o titulo da postagem (ou do texto) e isso nao resolve meu problema. Ex: o maximo que consigo eh assim:
    https://lh3.googleusercontent.com/-QG0vMMDzBvY/TW7V9eirGlI/AAAAAAAAALw/ht36ptf7T4g/s1600/border3.jpg mas quero que fique conforme a segunda imagem.
    Sabe como faço?
    Obrigado novamente

    ResponderExcluir
  108. Luiz
    esse tipo de alteração dá mais trabalho....

    você precisa retirar o fundo branco que deve estar em #main e depois criar o estilo post colocando o fundo branco nele no mesmo lugar onde retirou as margens

    ResponderExcluir
  109. Queria descobrir como separar posts do mesmo dia! Deixar a visualização de todos os posts como é a de posts de dias diferentes (com aquele espaço entre eles!) alguém ajuda? :)

    ResponderExcluir
  110. esse tutorial mostra uma maneira de criar separação entre as postagens... se você usar nos novos templates tem modelos que já tem separações mais elaboradas.. como por exemplo postagens dentro de "caixas"

    ResponderExcluir
  111. Fabiano, e entre gadgets, como retirar as linhas tradicionais do modelo mínima.
    Quero tirar as separação entre gadgets, como faço isso?

    ResponderExcluir
  112. as linhas são um tipo de borda... então procure por border:.... e apague a linha.. tem que fazer alguns testes até achar o lugar certo

    ResponderExcluir
  113. Encontrei o trecho
    .sidebar .widget, .main .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }
    e apaguei a linha correspondente, ou seja, border-bottom:1px dotted $bordercolor;
    Brigadim Filhão

    ResponderExcluir
  114. olá, preciso de sua ajuda, mudei o template do meu blog só que vários posts ficaram meio que desalinhados, a imagem da postagem fica de um lado e o texto do outro, na opção editar postagem esta tudo centralizado, o que posso fazer para todas as postagem automaticamente ficarem centralizadas? agradeço, abraço!!!

    ResponderExcluir
  115. NADINHO
    quando faz a postagem e envia a imagem tem a opção de centralizar ou deixar do lado do texto... é sobre isso que está falando?

    ResponderExcluir
  116. Oi Fabiano, tudo bem?
    Não consegui encontrar os códigos. No meu blog, na verdade queria diminuir o espaço entre as postagens e diminuir também o espaço entre a postagem e os comentários, que está gigantesca!

    Desde já obrigada!

    Abraço!

    ResponderExcluir
  117. Penélope Pelegrini
    seu template está com o mesmo problema de um que tentei editar essas dias....

    entre na pagina design, clique para editar as postagens e desmarque a opção de compartilhamento pelo blogger, veja aqui: Mostrar Botões de Compartilhamento no Blogspot

    o problema do seu blog é que as imagens desses botões não aparecem, tentei mas não conseguir corrigir isso, parece que é algo no template mas não achei o que. Então o jeito foi retirar isso do blog.

    sei que você não vê os botões no seu blog, mas passe o mouse sobre o espaço vazio antes dos comentarios, verá que a seta muda para a mãozinha igual quando está sobre um link, clique e verá que abre para compartilhar a postagem

    ResponderExcluir
  118. Fabiano não consegui encontar essa linha .post{padding-bottom:5px; border-bottom: 2px dashed #990000; margin-bottom:30px}

    me ajuda

    ResponderExcluir
  119. Consegui graças a sua dica e foi fácil.
    Muito obrigada.
    =D

    ResponderExcluir
  120. planetsupernatural.blogspot.com
    procure por .post o resto é só um exemplo...
    se não encontrar pode criar esse estilo

    ResponderExcluir
  121. Oi Fabiano!!!
    Muuuito obrigada por resolver meu problema, deu tudo certinho aqui!
    Só vi que os botões estavam lá depois que vc disse para passar o mouse, achei que tinha dado algum erro e eles tinham sumido.
    Tirei e ficou bem melhor!

    Muito obrigada mesmo!!!

    ResponderExcluir
  122. Fabiano, eu te mandei uma pergunta e você disse que não entendeu. Hehe. Assim, no blog eu post na pagina inicial, já as paginas extras eu não consigo criar novas postagens. O que eu queria era saber como eu consigo fazer com que as paginas do meu blog fiquem como deste blog aqui http://ninattavares.blogspot.com/ perceba que as demais paginas que não são a pagina HOME podem ser feitas outras postagens assim como na página inicial.

    ResponderExcluir
  123. Alini Trindade

    você está falando das paginas do menu:Home,Diários do Bebê,Desafio Literário,Resenhas,Blogroll ?

    esses item são marcadores do blog não são paginas extras

    ResponderExcluir
  124. Fabiano estou aqui com uma duvida e gostaria de sua ajuda, bom que colocar minhas postagem cada uma separada, mais quero usar uma coisa arrojada, como um box bem bacana que separe as postagem mesmo aquelas que foram postadas no mesmo dia,ou seja cada postagem em um box, tem como me ajudar nisso ???

    ResponderExcluir
  125. eu queria por, mas é muito dificil. Que pena.

    ResponderExcluir
  126. Lagartão
    não é tão dificil crie o estilo .post

    mas use o ctrl f antes para ver se já existe um, se tiver só precisa adicionar a linha com o código da borda

    ResponderExcluir
  127. olá tudo bom, precisa me ajudar, a distância entre a postagem e o titulo está grande, se puder me dar uma dica de como aproximar postagem do titulo agradeço!

    ResponderExcluir
  128. Fabiano, criei um blog com o resumo das postagens com o "leia mais", desmarquei todas as opções na caixa "editar postagens" mas continua aparecendo uma caixa que diz: marcadores.
    Como eu retiro aquela barra que fica abaixo da postagem?
    O que eu quero é juntar uma postagem na outra, sem nada no meio, só o título, imagem e descrição.
    Dê uma olhada: http://gataarrepiada.blogspot.com
    Aguardo sua ajuda.

    ResponderExcluir
  129. Giovani Bartz
    isso é complicado de explicar pois seria necessário fazer testes no seu html....

    ResponderExcluir
  130. gostaria de saber como colocar na postagem do meu blog palavras que se passar o mouse abra outra janela dizendo o significado. por favor me ajudem............

    ResponderExcluir
  131. gleisi
    sua pergunta ficou meio indefinida.... que outra janela seria essa? uma pagina de internet? uma pagina do seu blog?...

    pode fazer links nas postagens seria isso?

    ResponderExcluir
  132. FABIANO ROBERTO, O QUE EU QUERO É ASSIM QUANDO EU COLOCAR UMA PALAVRA NA POSTAGEM E ELA FOR TIPO ASSIM DIFERENTE, QUANDO A PESSOA PASSAR O MOUSE, ABRIR O SIGINIFICADO DESSA PALAVRA, SERÁ QUE TEM COMO? NAO SEI SE DAI ABRE UMA JANELA PARA OUTRO SITE, OU SÓ UM LEMBRETE. OBRIGADO!!!!!!!!!!!1

    ResponderExcluir
  133. gleisi
    acho que o jeito mais facil de fazer isso é usando o title, mas sem link, veja:
    <a href="#"title="pagina de internet">blog</a>



    isso vai aparecer como um link e quando passar o mouse aparece o texto explicativo, mas mesmo se clicar no link não acontece nada. a unica função é aparecer o texto quando passar o mouse

    ResponderExcluir
  134. Sou iniciante no blog e gostaria que vc me desse uma dica. eu só quero postar uma postagem na página inicial e colocar alguns gadgets no rodapé do blog para ficar mais parecendo um site, porém fica um espaço muito grande entre a única postagem e a linha tracejada que separa os gadgets do rodapé. Como faço para diminuir este espaço?
    aguardo resposta. Se precisa ver o blog me avise.

    ResponderExcluir
  135. Netto Oliver, a quantidade de postagens na pagina inicial você pode alterar em detalhes >> formatação

    lá pode escolher quantas postagens aparecem

    sobre o espaço no rodapé isso depende, mas procure por padding ou margin com valor alto, principalmente em códigos parecidos com esse #footer-wrapper

    ResponderExcluir
  136. eu gostaria de saber como posso dividir as postagens do blog em uma grade. obrigada

    ResponderExcluir
  137. esse código seria um tipo de formatação do resumo da postagem... vou fazer uns testes e se funcionar(como imagino) publicarei um tutorial sobre o assunto

    ResponderExcluir
  138. Oi Fabiano, blz?

    Gostaria de saber como faço pra ter as postagens separadas em duas colunas apenas na página inicial, igual no blog Frases Curtas?

    Obrigado!

    ResponderExcluir
  139. rui
    acho que você está falando desta pagina do frases curtas

    são links das postagens feita com uma adpatação deste código: Lista aleatória das postagens recentes do blog


    mas não é uma alteração de template, só funciona naquela pagina, usando essa formatação CSS

    .frasesaleatoria a{background-color: #FFFFcc;padding: 2px;height: 160px;width: 290px;margin: 10px;border: 1px solid #000000;float: right;color: #000000}
    .frases a:hover{background-color: #FFFF66;border: 1px solid #0000FF}

    ResponderExcluir
  140. Como faço para separar as postagens nas páginas extras. Como no seu site mesmo, que as postagens são divididas por essa linha pontilhada cor vinho, além de ter a hora da postagens e comentários?

    Existem algum código para isso?

    ResponderExcluir
  141. Fabiano, boa tarde!

    Como coloco borda na área de postagem, mas que o conteúdo da postagem fique afastado da borda como fosse uma margem.

    Dese já agradeço.

    ResponderExcluir
  142. mauricio
    em vez de usar padding-bottom:5px

    use padding-left:5px

    isso faz uma margem do lado esquerdo, se precisa pode usar também padding-right:5px, mas separe com ponto e virgula assim:

    .post{padding-bottom:5px;padding-left:5px;padding-right:5px}

    e claro pode usar o valor que desejar em cada uma delas individualmente

    ResponderExcluir
  143. Fabiano,

    Como eu faço para aumentar a área de postagem, diminuindo o espaçamento entre as colunas laterais, isto sem mexer na largura do blog.
    Mais uma vez, desde já agradeço.

    ResponderExcluir
  144. se você usar os novos templates é só ir na pagina design do modelo e tem como ajustar (Designer de modelo - Layout e Configurações Avançadas)

    se não veja aqui: Largura do Blog

    ResponderExcluir
  145. Fabiano,

    Como eu consigo centralizar uma imagem que esta dentro do gadget, sendo que a mesma está hospedada no Picassa.

    Desde já agradeço.
    www.calopsitar.com.br

    ResponderExcluir
  146. MAURICIO
    se colocou a imagem com um gadget de html/javascript é só colocar < center > antes e depois do código da imagem

    ResponderExcluir
  147. depois q eu fiz essa alteração no meu blog apareceu esta imagem oq seria ? porq aconteceu isso ?

    http://2.bp.blogspot.com/-K5DguKuf3mA/Tk-lWI55BnI/AAAAAAAAAJs/t-RgW89bSzs/s1600/leiamais.jpg

    obrigada..

    ResponderExcluir
  148. yagodownloads.blogspot.com
    depende de qual código utilizou

    se não quer a imagem pesquise por ela no seu html provavelmente vai encontrar, então troque ou retire

    ResponderExcluir
  149. marcadores são uma maneira de classificar suas postagens por assuntos, veja aqui Colocar Marcadores no blog

    ResponderExcluir
  150. tipow deu certo mais o meu ainda fika as vezes um espaço entre os posts mostrando o fundo...

    poderia me ajudar?

    http://deathisover.blogspot.com

    por favor preciso de ajuda msm nisso!

    ResponderExcluir
  151. meu blog fika uma separação entre as postagens de vez em quando,pode me ajudar?

    ResponderExcluir
  152. entrei no seu blog e não vi espaços entre as postagens

    ResponderExcluir
  153. tipo tem 2 posts ai da um espaço azul e vai pro outro olha bem!
    vlw

    ResponderExcluir
  154. aquela é a separação por dia da postagem... veja que a faixa aparece quando muda o dia do post...

    ResponderExcluir
  155. ahh entendi! mais tipo nao tem como mudar e deixar tudo grudado?

    ResponderExcluir
  156. é necessário fazer testes no template...

    mas tente isso aqui
    .date-posts {
    margin: 0 -15px;
    padding: 0 15px;
    clear: both;
    }

    troque padding: 0 15px; por padding: 0 px;

    ResponderExcluir
  157. deve ter alguma parte com margin ou padding dando espaço, mas é complicado dizer onde extamente

    veja estilos post, por exemplo : #post, .post-footer ou #main

    ResponderExcluir
  158. eu axei isso aqui

    .post-footer {
    margin: 1.5em 0 0;
    }

    #blog-pager {
    padding: 15px;
    font-size: 120%;

    dai mudei para margin: 0px 0 0; e mesmo assim nao deu...

    ResponderExcluir
  159. os novos templates são dificeis de editar... estou pensando em como fazer um tutorial para deixar isso mas facil mas são tantas as variaveis... e possibilidade de templates que está dificil

    ResponderExcluir
  160. então eu fiz isso aki com o código completo do meu template

    http://dl.dropbox.com/u/44606841/todos%20ops%20codigos.txt

    será q assim nao seja mais facil de me ajudar?

    ResponderExcluir
  161. Rafael
    desculpe mas não fazemos edição de templates para outros blogs

    é muita gente que fala sobre isso e seria impossivel atender a todos

    ResponderExcluir
  162. mais vc nao poderia nem olhar e me indicar onde eu posso mudar para tirar akeles espaços?

    ResponderExcluir
  163. a questão é que os novos templates são complicados, esse tipo de alteração precisa fazer testes no blog (editando o html e visualizando o blog)

    se eu falar trechos do html para você modificar vamos acabar criando erros no seu html

    ResponderExcluir
  164. puts cara eh q realmente eu precisava de ajuda

    ResponderExcluir
  165. Fabiano,

    Como diminuir o espaço entre postar comentario e o rodape da pagina?

    Desde já agradeço

    ResponderExcluir
  166. Olá Fabiano, estou com um espaço entre as postagens, que não é normal, tentei localizar os códigos:

    .post{....}

    OU

    .post{padding-bottom:5px; border-bottom: 2px dashed #990000; margin-bottom:30px},

    mas de qualquer forma não achei, como faço então?

    Grata por sua atenção.

    Sirlei

    ResponderExcluir
  167. @Grupo de Tradição e Cultura "OS GUAPOS" você habilitou os anuncios do adsense entre as postagens mas não está aparecendo.

    se procurar no seu html verá que o espaço vario é um anuncio tamnho 300x250

    sua conta do adsense já está ativa?

    ResponderExcluir
  168. Essa dica também funciona com as páginas extras do blogger?

    ResponderExcluir
  169. a pagina extra não tem separação porque é só uma postagem por pagina

    ResponderExcluir
  170. eu nao consegui colocar as bordas, me ajudaaaaaaaa

    ResponderExcluir
  171. me mande temas de bloger faceis e bons

    ResponderExcluir
  172. todos os templates são dificeis de mexer no html

    ResponderExcluir
  173. Fabiano,nesta postagem tem como colocar uma linha ou imagem estre as postagens e quero retirar.
    Vou tentar inverter o código.
    Obrigada,bjs

    ResponderExcluir
  174. Eu queria saber como e que faz tirar aquela linha(que serve para dividir os gadgets), aguardo resposta!

    ResponderExcluir
  175. a linha deve ser algum tipo de borda

    procure por border e o estilo .widgets

    ResponderExcluir
  176. muito obrigado,voce me ajudou muito!

    ResponderExcluir
  177. Oi, preciso de ajuda coloquei como vc explicou, entretanto somente a 1 e a 2 postagem ficaram com espaço enorme entre o titulo e a borda. O que posso fazer? Meu blog: http://www.antenafashion.blogspot.com.br/

    ResponderExcluir
  178. esse código funciona de forma igual em todas as postagens, mas depende de outros estilos e configurações de cada blog, veja aqui como achar os códigos: Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript

    ResponderExcluir
  179. Fabiano, no meu blog as postagens de datas diferentes são separadas, mas se eu posto mais de uma vez em um dia as postagens desse dia ficam juntas, separadas somente por uma linha. Tem como separar todas elas, mesmo que sejam na mesma data? Segue o link do blog para você entender melhor. Obrigada.

    ResponderExcluir
  180. Obrigada, Fabiano, eu to precisando mesmo disso.

    Eu vejo que isso acontece nos templates do blogger. Nos que eu baixo nos sites nunca aconteceu isso, sempre aparece Título e embaixo do título a data e hora. Agora nos do blogger vem sempre a data primeiro e agrupa todos os posts da mesma data.

    Por favor, vê se consegue isso pra mim.

    Abraços!

    ResponderExcluir
  181. diariodesemideusa se todas as postagens estão com a mesma hora é porque no html do seu blog em vez do código da hora tem um valor exato, ou seja uma hora definida.

    ResponderExcluir
  182. Não, não Fabiano, a data e hora ficam certos, o que eu quis dizer é que as postagens do mesmo dia ficam agrupadas em um "bloco" separadas por uma linha, aí no dia seguinte as postagens ficam agrupadas em outro "bloco".

    Eu queria que cada postagem fosse individual, como nesse blog (www.depoisdosquinze.com), onde cada postagem é separada em um "bloco" individual.

    Entre no meu blog e veja, acho que você vai entender melhor. As postagens do mesmo dia são separadas somente por uma linha.

    Lembrando que meu template é do blogger mesmo, não foi baixado.

    ResponderExcluir
  183. quando clica no titulo da postagem ela aparece numa pagina individual.

    é normal ficar esse tipo de separação se fizer mais de um post por dia

    ResponderExcluir
  184. Fabiano Roberto, Como que Faço Pra Colocar um poster do lado do outro em 2 colunas na postagem ,e com o texto de baixo da imagem em miniatura ?

    ResponderExcluir
  185. Gel Jefferson é melhor procurar um template pronto com esse layout, mas salve uma cópia do seu template atual assim se tiver problemas poderá voltar ao modelo atual que usa.

    ResponderExcluir
  186. valeu cara meu blog fico muito massa
    http://newspires.blogspot.com/

    ResponderExcluir
  187. Oi Fabiano,quero separar as postagens e colocar uma divisória,uma barrinha por exemplo,mais estou usando um blog de texte o modelo é o Travel/viagem.Qual o código responsável pela área de postagens,saberia me dizer?obrigada.

    ResponderExcluir