Barra de rolagem na postagem

Para colocar uma barra de rolagem nas postagens vá até a pagina editar html procure por:

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

e coloque essa linha:
height: 400px;

O numero 400 é o espaço na vertical que suas postagens ocuparão, esse também será o tamanho da barra de rolagem (altura).

Depois na ultima linha tire a palavra hidden e coloque auto

Isso vai fazer aparecer a barra de rolagem nas postagens, depois você ajusta o numero 400 do tamanho que desejar.
Para fazer isso em outros blogs além do blogspot, você deve encontrar o código que controla as postagens e seguir o mesmo procedimento colocar: height: 400px; overflow: auto, que funcionará do mesmo modo.

Se tiver duvidas pode ver nosso outro tutorial sobre esse mesmo assunto: Colocar Barra de Rolagem nas postagens

45 comentários :

  1. boa noite
    cara adorei seu blog
    e peguei algumas coisas pra mim
    eu to começando agora e, tenhu MIL duvidas...sera que voce podia me dar uma força??

    muito orbigado desde jah!

    ResponderExcluir
  2. meu blog
    www.carudocaralarga.blogspot.com

    ResponderExcluir
  3. OLÁ!

    VALEU PELA DICA DA BARRA DE ROLAGEM,CONSEGUI COLOCAR NO MEU NOVO BLOG.NO HTML TINHA 2 VEZES AQUELAS LINHAS QUE VC CITOU, POR ISSO ME DIFICULTOU UM POUCO ATÉ EU DESCOBRIR O QUE ESTAVA DANDO ERRADO,MAS NO FIM DEU CERTO VALEU MESMO,TÔ TE LINCANDO

    ResponderExcluir
  4. Brigada..........
    te amoooooooooooo

    ResponderExcluir
  5. Olá Fabiano, te mandei um email para vc me ajudar a fazer a barra de rolagem dessa que começa com rascunhos de uma vida, naveganters, blogão da rô etc.....
    Me ajude!!
    Patrícia

    ResponderExcluir
  6. Ou
    como vc coloco aquela barra de rolagem em baixo do Banner seu e como vc coloco os codigos sem q eles virasse banner

    ResponderExcluir
  7. ola só estou passando para avisar
    quando copiar auguma postagem Do Me Blog Me Avisar Ok.

    ResponderExcluir
  8. -=|ßy ®öñä£ðö †|-|ë ߣög †öö£§|=-


    copiar algo? quando publico algo nesse blog que me foi enviado eu publico o link junto, clique no marcador colaboradores.

    se vc estiver falando dessa postagem com o codigo de barra de rolagem sabia que isso foi publicado em janeiro/2008 ou seja alguns meses antes do seu.

    ResponderExcluir
  9. oi sou fã do seu blog, a dica da barra de rolagem é muito boa, mas como poderiamos fazer uma barra de rolagem so na vertical das postagens, sem incluir a barra na horizontal.

    um abração.

    ResponderExcluir
  10. rosangelase colocar no html do seu blog

    .post{overflow:auto;height: 400px;}

    aparecerá a barra de rolagem nos posts do blog depois é só ajustar o valor 400

    ResponderExcluir
  11. cara o 400 serve pra almenta a altura nao tem nem um numero pra almentar o comprimento nao?

    ResponderExcluir
  12. Anônimo
    a largura o código é width: 500px, mas isso depende de onde colocar o código por exemplo se colocar largura 500 como fiz aqui e a coluna tiver só 300 vai gerar um conflito, isso pode aparecer de modos diferentes dependendo do navegador(internet explorer, firefox, opera...) que seus visitantes usam.

    ResponderExcluir
  13. oi, gostei do seu blog, fiz como vc disse mais não consegui a barra de rolagem a única coisa que aconteceu foi que inverteu as postagens. Por exemplo, não ficou nenhuma do lado, ficaram uma abaixo da outra, ou seja nenhuma na lateral, me dá uma luz?
    Beijos

    ResponderExcluir
  14. eu queria saber como colocar uma barra de rolagem apenas em 1 unica postagem. aguardo. amigasdaeducacao.couto8@gmail.com.
    joelma couto. obrigada.

    ResponderExcluir
  15. para colocar uma barra de rolagem somente em uma postagem o melhor jeito é na hora de publicar o texto colocar isso no começo e final dele:

    <div style="overflow:auto; height:300px">texto e imagens aqui</div>

    ResponderExcluir
  16. Ola fabiano tenho uma fabrica de baquetas de tocar bateria e tenho facebook site blog e my space, vou falar a respeito do blog, sera que teria como a barrra de rolagem ficar transparente ? tipo assim, porque no fundo tem uma foto ai a barra da branca, ai achei q n fico legal, poderia me ajudar ?
    Brigado

    ResponderExcluir
  17. barra de rolagem transparente acho que não tem, poderiamos ocultar a barra mas ai as pessoas não vão conseguir navegar pelo blog

    ResponderExcluir
  18. Tudo bem, Mesmo nao tendo solucao agradeco, e queria te falar, que seu blog e incrivel cara, depois olhe meu blog, www.blogsportmade.blogspot.com, repare bem e olhe que tudo que ta la, sao dicas do seu blog, mas eu tenho uma duvida, debaixo daquela foto da sport made de fogo no meu blog, tem um menu, mas ele nao destaca muito pq so tem escrito

    * >PAGINA PRINCIPAL * >ALBUM DA SPORT* >VIDEOS EM DESTAQUE* >PRODUTOS A VENDA, e o fundo e uma foto e essas paginas acabam ficando nao destacadas, mas n consegui colocar nada no fundo, tipo um barrado preto ou alguma coisa assim pra distacar essas paginas, poderia me ajudar?
    Desde ja, Muitissimo obrigado, e Abraco !!!

    ResponderExcluir
  19. você poderia formatar aqueles links, criar botões com eles, veja aqui:

    Links lado a lado (menu horizontal)

    ResponderExcluir
  20. oi boa tarde, seu blog é tudo de bom...ótimas dicas...
    bem vamos lá...tenho o blogspot e gostaria de colocar a barra de rolagem nas postagens, tentei seguir suas dicas mas não encontrei isso:

    #main-wrapper {
    width: 410px;
    float: $startSide;
    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 */
    }

    então o que faço??
    obrigado!!!

    Sirlei

    ResponderExcluir
  21. no trecho overflow: hidden; troque hidden por auto

    e coloque height: 400px; logo depois das chaves, ficará assim:

    #main-wrapper {height: 400px;
    width: 410px;
    float: $startSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: auto; /* fix for long non-text content breaking IE sidebar float */
    }

    ResponderExcluir
  22. desculpa minha ignorância...rsrrs
    mas o que achei foi:




    nada igual ao que vc passou...

    mais uma vez obrigado
    Sirlei

    ResponderExcluir
  23. opsss...
    o que achei no editor de HTML...

    id='crosscol-overflow'

    Como havia falado nada igual ao que vc indicou..

    Sirlei

    ResponderExcluir
  24. esse trecho que está falando id='crosscol-overflow' não é nesta parte que vai alterar o código, precisa ser no código que controla a coluna toda.

    tente colocar neste trecho:

    .main-inner .columns {height: 400px;overflow: auto;
    padding-left: 360px;
    padding-right: 180px;
    }

    a parte height: 400px;overflow: auto; eu modifiquei agora, no seu blog não tem.

    ResponderExcluir
  25. valeu obrigado....

    agora de certo!!!

    Sirlei

    ResponderExcluir
  26. Mais uma dúvida de várias...

    essa barra de rolagem não ficou somente nas postagens, mas na parte que ela foi adicionada movimenta toda a página do blog, é possível ficar só nas postagens ??
    sem mexer em outra parte ?

    bjos

    ResponderExcluir
  27. Falando Sério
    é possivel ,mas precisa achar o lugar certo de colocar o código no seu html, tente entrar na pagina editar html e alterar o trecho .main-inner para ficar assim:

    .main-inner {
    padding: 20px 0;height: 350px;overflow: auto;
    }


    Barra de rolagem em qualquer parte do blog

    ResponderExcluir
  28. Ficou da mesma forma....movimenta tudo, não apenas a coluna desejada..

    Sih

    ResponderExcluir
  29. os modelos novos usam tags diferentes, então seria necessário fazer alguns testes para achar o lugar certo no html, tem muitos trechos com o estilo main, não tenho como saber exatamente em qual deles sem testar diretamente no blog.

    ResponderExcluir
  30. oi queria postar essa foto [http://lpmagal.com.br/tiras/1711.png] mais com barra de rolagem no meu blogspot, como eu faço isso?

    ResponderExcluir
  31. Juba e Vinicius
    para colocar a barra de rolagem use o código

    <div style="overflow: auto;width:100px"><img src="http://lpmagal.com.br/tiras/1711.png"border="0" /></div>

    ResponderExcluir
  32. Novamente esse novo problema, não acho #main-wrapper { meu modelo não tem essa linha. poderia me ajudar? eu uso o travel (viagem) novo modelo do blogger

    ResponderExcluir
  33. os novos modelos tem códigos diferentes, procure por .main-inner vai achar varios e precisa fazer o teste para saber qual deles é o correto, isso varia muito nos modelos novos

    ResponderExcluir
  34. Não encontrei como colocar a barra de rolagem em apenas uma postagem, como você fez no código das cores http://www.dicasparablogs.com.br/2009/02/codigo-das-cores.html
    Você pode me dizer como fazer Fabiano?

    ResponderExcluir
  35. aquele menu com as cores foi uma adaptação com o código das cores.. não tem como explicar não é um código java, mas é feito linha por linha

    ResponderExcluir
  36. O foco do meu comentário é a barra de rolagem em uma postagem apenas. Tem como fazer?
    Se sim, qual o código?

    ResponderExcluir
  37. na pagina da postagem você pode usar o código

    <div style="height:400px; overflow:auto">textos e imagens do post aqui</div>



    o valor 400 é o tamanho da barra de rolagem

    ResponderExcluir
  38. Dentro da postagem que quero a barra de rolagem não deu certo. É pela página editar html?

    ResponderExcluir
  39. se colocar o código pela pagina editar html como mostramos na postagem aparecerá em todas as postagens

    o código do outro comentário é para usar em uma postagem só

    ResponderExcluir
  40. ocorreu um problema com a barra de rolagem. eu consegui colocar, e coloco ela do tamnho que eu quero. mais ai o blog nao termina no rodapé. ele vai bem mais em baixo como se tivesse mais tres comentarios pra baixo, so que nao aparece nada só o fundo.

    ResponderExcluir
  41. não consigo achar o código citado para procurar
    me ajuda

    ResponderExcluir
  42. nos templates mais novos as tags são diferentes...

    tentei entrar no seu perfil para ver seu blog, mas a pagina está indisponivel (erro bx)

    ResponderExcluir
  43. Fabiano roberto nao achei nada
    coloquei o código inteiro depois coloquei em partes pelo CTRL+F e nao achei esse trechoo:
    #main-wrapper {
    width: 410px;
    float: $startSide;
    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 */
    }

    ResponderExcluir
  44. os templates novos são diferentes.

    tente usar o inspecionar elemento do firefox para achar os códigos no seu template.

    ResponderExcluir