Colocar Barra de Rolagem nas postagens

Atendendo aos pedidos de alguns visitantes deste site vamos mostrar como colocar uma barra de rolagem nas postagens do blogspot(veja outra forma de colocar uma Barra de rolagem na postagem), isso pode ser interessante caso queira dar um visual diferente no seu blog ou colocar algum outro acessório abaixo das postagens. Mas lembre-se isso é só uma barra de rolagem isso não deixará o blog mais rápido, pois carregará a pagina toda da mesma forma que antes.

Editar postagens do blog
Para fazer isso entre na pagina editar HTML e procure pela linha de código responsável por mostrar as postagens do seu blog, normalmente se procurar por postagens do blog achará uma linha parecida com essa:

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>

Aqui não vamos alterar nada o que viemos fazer aqui é ver qual é a id (estilo de formatação) da postagem, em nosso exemplo é Blog1, então rolamos a pagina do HTML até o começo de antes da linha body{...} colocamos esse código:

#Blog1{overflow-y:auto; overflow-x: hidden; height:300px; width: 100%;margin: 0px;}

Note que apenas colocamos o sinal # antes da id e criamos um estilo (formatação), o trecho height:300px é a altura que terá a barra de rolagem, mas se quiser pode usar isso para modificar a aparência da postagem como por exemplo formatar o texto de outra forma ou colocar bordas nesta barra de rolagem.

Ainda é possível fazer esse mesmo procedimento em qualquer outro trecho do blog, por exemplo, a sidebar, o código dela é assim:

<b:section-contents id='sidebar-right-1'>

Então iríamos criar o estilo #sidebar-right-1{….} da mesma forma que fizemos com a postagem.

56 comentários:

  1. obrigado por atender o pedido, procurei muito por isso, e nem imaginava que era tão simples fazer

    ResponderExcluir
  2. Aiii Fabianooooooooooo, agora deu certo..valeu por atender esse pedido que gerou muitas trocas de e-mails...

    Adoro seu blog....voce é show!!!

    Bjocas Sih

    ResponderExcluir
  3. oi...tô querendo fazer com que meus posts sejam reduzidos como o seus...pode postar algo sobre isso??

    ResponderExcluir
  4. Olá Fabiano!
    Sempre que posso acompanho as suas dicas, que são ótimas! Parabéns!
    Grande beijo,
    Jackie

    ResponderExcluir
  5. oi, meu querido!Adoro seu blog!!Sempre que tenho alguma dúvida ou mesmo quero mudar alguma coisa no meu blog, venho aqui conferir as novidades.Valeu!!Seu blog é 1000.Bjs!!

    ResponderExcluir
  6. Tem como colocar efeito sublinhado em todos os links do blog de uma só vez? Pode me ajudar? Obrigado pela paciencia.

    ResponderExcluir
  7. Anônimo
    entre no html do seu blog e procure por a:hover{...} aqui dentro das chaves coloque text-decoration:underline;

    se já tiver algo assim, apenas troque a palavra que estiver depois dos dois pontos.

    ResponderExcluir
  8. Fabiano,dentro dessa barra de rolagem posso por imagens? meu blog usa muitas imagens... Obrigado de novo!! Beijos,beijos.

    ResponderExcluir
  9. Outra pergunta,essa mudança afetará todas as postagens do blog? Mesmo as antigas?

    ResponderExcluir
  10. ઇઉ Mel ☆ mendes♫ ♪ ♫
    pode usar com imagens e isso afetará todas as postagens do seu blog

    ResponderExcluir
  11. Existe algum código que se possa usar a barra de rolagem numa postagem isolada? Sem que se aplique a todas as postagens?

    ResponderExcluir
  12. pode usar deste jeito dentro da postagem

    <div style="overflow:auto; height:300px">conteudo aqui</div>



    depois ajuste o valor 300 pra o tamanho que achar melhor

    ResponderExcluir
  13. Muito obrigado,tentarei agora!Você é o Mago do Html! Beijo!

    ResponderExcluir
  14. Olá! Aparecem vários body, mas não consegui identificar qual era o certo para colar o código. Vc pode me ajudar? Obrigada!

    ResponderExcluir
  15. Adijane
    o importante é colocar naquela parte do código não tem um lugar exato, pode ser qualquer um deles.

    apenas cuidado com as chaves para não misturar os códigos: body{...}

    ResponderExcluir
  16. Não consegui colocar, pois existem vários body, você pode me dar um exemplo de quais dele colocar e onde se antes ou depois....obrigado

    ResponderExcluir
  17. Tyaggo
    leia meu comentário anterior a esse

    ResponderExcluir
  18. nao tem como colocar essa barra de rolagem apenas nas postagens qdo abrir? tipo, o pessoal entra no meu blog, ai depois q for abrir o link ativa a barra de rolagem?

    ResponderExcluir
  19. acho que não é possivel colocar a barra somente quando visualizar a postagem do blog

    ResponderExcluir
  20. tipo, tem como fazer isso com as postagens separadas? tipo a barra de rolagem fica em todas as postagens, queria deixar ela em cada postagem separado

    ResponderExcluir
  21. Diego
    tente fazer o que falamos aqui, mas em vez de criar um estilo #Blog1, use o nome #post, mas acho que o efeito visual pode ficar estranho

    ResponderExcluir
  22. Bom dia !
    1º Parabens pela iniciativa do seu blog aqui tenho obtido inf. importantissima.
    Tenho uma duvida: fiz conforme orientação para barra de rolagem coloquei o codigo antes da linha body no entanto da erro no meu blog ate aparece a barra, mas o blog nao responde. Porque sera ?

    ResponderExcluir
  23. nem todos os templates são iguais, então alguns pode ser necessário colocar os códigos em outra parte

    coloque o CSS depois do trecho body{....}

    ResponderExcluir
  24. Achei a linha

    porém não entendo quando vc diz "então rolamos a pagina do HTML até o começo de antes da linha body{...} colocamos esse código:

    #Blog1{overflow-y:auto; overflow-x: hidden; height:300px; width: 100%;margin: 0px;}

    Não encontro essa linha body {...}

    obrigado

    ResponderExcluir
  25. achei a llinha

    porém não entendo quando vc diz "então rolamos a pagina do HTML até o começo de antes da linha body{...} colocamos esse código:

    Não consigo achar essa linha body{...}

    desde já, muito obrigado!

    ResponderExcluir
  26. Bruno Malakian
    esses códigos CSS que são a formatação da pagina ocupam grande parte do código html do blogger, então o body é apenas uma refencia, não precisa se exatamente neste local.

    poderia ser antes de #content-wrapper {...


    veja mais aqui: Onde colocar os códigos no blog

    ResponderExcluir
  27. nossa muito obr tentei tanto fazer isso vc é um anjo

    ResponderExcluir
  28. Olá! Fiquei feliz em saber que teria como eu colocar barra de rolagem nas minhas postagens, mas eu não consegui! Acho que não consegui entender exatamente como inserir no html. Você poderia me ajudar? Preciso com urgência...

    ResponderExcluir
  29. Deise
    você precisa achar o nome do estilo do gadget e depois criar o código como mostramos no tutorial #Blog1{overflow-y:auto; .........


    no lugar de Blog1 coloque a id do gadget b:widget id='Blog1' lock......

    ResponderExcluir
  30. Entendi tudo até á parte: "Então rolamos a pagina do HTML até o começo de antes da linha body{...} . nao percebo onde coloco

    ResponderExcluir
  31. Não consegui faze....eu me embanano quando vejo esses código e me perco...

    ResponderExcluir
  32. Cristiane Tiago dos Santos
    infelizmente não tem outro jeito de fazer só mexendo com os códigos mesmo

    ResponderExcluir
  33. ei amigo
    ñ intendi esse trecho
    (então rolamos a pagina do HTML até o começo de antes da linha body{...} colocamos esse código:)

    qer dz uma linha antes?
    ñ consegui achar esse trecho
    (body{)

    ResponderExcluir
  34. é para colocar o código uma linha antes do body{.... no seu blog não será exatamente assim cada um usa configurações diferentes no lugar dos pontos

    ResponderExcluir
  35. Cara olha eu nao consegui não, eu nao achei essa linha Body{.. nao eu uso o modelo simple aqui no blog to procurando esse tuto mais nao acho em lugar nenhum os codigos lah no CTRL+F vlw

    ResponderExcluir
  36. toda pagina tem body {... é que usando o ctrl F o texto tem que ser exato... pesquise somente body, achará varios

    ResponderExcluir
  37. Achei nsuper dificl o tutorial...Queria que me explicase melhor

    ResponderExcluir
  38. na verdade é simples, você só tem que criar um estilo #Blog1 e colocar o código da barra de rolagem o outro trecho é só para confirmar o nome do estilo

    ResponderExcluir
  39. Demorei pra entender mais consegui...
    eu tive que ir na linha body e colocar o seguintes sinais {...}
    po isso eu am consegui rarara

    ResponderExcluir
  40. Então pessoao, eu até q consegui colocar a barra de rolagem mas qundo eu ponho ela desaparece todos os efeitos visuais do meu blog...
    ...oq eu posso fazer em relação a isso? Alguém me ajunta por favor?

    ResponderExcluir
  41. Jalison
    veja se não alterou nenhum outro trecho do html por engano

    esse código é só para alterar as postagens colocando a barra de rolagem todo o resto continua sem alterações

    ResponderExcluir
  42. o body fica na pagina editar html, clique em desing e verá a guia html, depois use o ctrl f para achar na pagina

    ResponderExcluir
  43. Olá, como faço para aumentar a área de postagem? depois q coloquei a barra de rolagem ficou tudo muito commpactado, visualmente. Muito obrigada pela ajuda. Seu blog é de fundamental importância.

    ResponderExcluir
  44. Oi, complementando a pergunta anterior, como faço para isolar a barra de rolagem por postagem?
    Muitíssimo obrigada.

    ResponderExcluir
  45. Eu te ensino, tu me ensinas e nós aprendemos.
    a barra de rolagem é só um acessório... mas pode aumentar no código height:300px; ou simplesmente deixar sem a barra

    ResponderExcluir
  46. Amigo, não tem como "deixar de fora" da rolagem a área "Postado por....(e demais elementos?)

    obrigado !

    ResponderExcluir
  47. Angel Fairy
    não tenho certeza, mas se quiser faça um teste, mas em vez de usar no estilo #Blog1 como falamos no tutorial use com

    .post-body entry-content{overflow-y:auto; overflow-x: hidden; height:300px; width: 100%;margin: 0px;}


    se não achar o .post-body entry-content pode adiconar ao CSS, no mesmo lugar onde está o #Blog1


    mas como falei eu não testei é apenas uma idéia olhando o html do blog

    ResponderExcluir
  48. Oi, então eu estou tentando mudar um theme simples que o próprio blogger oferece, porém não consegui compreender o post direito,
    poderia mostrar alguma imagem?
    Grata

    ResponderExcluir
  49. @Equipe YBT esse código da barra de rolagem não tem como mostrar. você só tem que achar a linha no html do seu blog e criar o estilo com o mesmo nome

    ResponderExcluir
  50. Mano eu já vi um codigo akie parecido com esse mas era pra colocar o codigo direto ta postagem só pra i texto da postagem ficar dentro do Scrool onde eu encontro? Obrigado

    ResponderExcluir
  51. pode tentar usar o código que mostramos mas em vez de colocar #Post1 use .post

    veja se fica do jeito que está querendo

    ResponderExcluir
  52. Parabéns pela sua boa vontade em ajudar! Até uma pessoa "manca" como eu está conseguindo mudar o visual do blog graças à vc! Obrigado!

    ResponderExcluir