{Aprenda Blogspot}

Aprenda Blogspot Blog | Created By Www.BestTheme.Net

Barra de Rolagem

Posted by Igor Natanyo




Alguns acham isso de caixa de rolagem e outros pensam que isso é similar a um caixinha tipo link-me, mas na verdade é uma barra de rolagem somente, apenas sua aparência é igual de uma caixa. Para colocar um scroll ou barra de rolagem em alguma parte do blog o código é o seguinte:


<div style="height:100px; width:200px; overflow:auto; background-color:
#FFFFCC; text-align: center;padding: 2px; margin:5px ">
<div style="width:160px">
Conteúdo da caixa de rolagem
</div></div>


Isso é muito útil para economizar espaço no blog sem fazer que o visitante tenha que mover a pagina inteira para ver algo de uma lista especifica. Mas vamos entender como fazer uma barra de rolagem no blog. Neste código você precisa alterar alguns valores para deixar essa “caixa de rolagem” do tamanho certo para seu blog.
No código encontramos as seguintes partes:

height:100px - altura
width:200px - largura
overflow:auto - código da rolagem(não altere)
background-color: #FFFFCC – cor do fundo
text-align: center – alinhamento(center, left ou right)
padding: 2px - espaço entre a borda da caixa e o conteúdo
margin:5px - margem externa, serve para deixar um espaço vazio ao redor da caixa


Todos esses valores podem ser alterados para deixar a caixa de rolagem do jeito que seu blog precisa, porém se quiser você pode retirar alguma dessas partes do código que ele continuará funcionando normalmente, por exemplo, background-color: #FFFFCC somente deixe essa parte se quiser uma cor de fundo diferente para a caixa de rolagem.

Onde está escrito Conteúdo da caixa de rolagem, você pode colocar texto ou imagens e não tem limite para a quantidade de textos ou imagens para esse conteúdo. Porém lembre-se de respeitar a largura da caixa que você criou pois se as imagens tiverem largura maior que a caixa além da barra de rolagem lateral, aparecerá um barra de rolagem em baixo também.

Sobre a linha <div style="width:160px"> isso serve para evitar que apareça a barra de rolagem inferior no caso de textos portanto quando alterar o valor da largura tem que mudar esse também. Existem outros meios de fazer aparecer somente a barra lateral, mas quando testei eles não funcionaram em todos os navegadores, por exemplo o código overflow-x: hidden nao funcionou no Internet Explorer, por isso coloquei mais essa linha de código: <div style="width:160px">.

4 Responses so far.

  1. Unknown says:

    ola.
    quero inserir uma barra de rolagem em uma das gadget (texto) que fica na coluna lateral onde quero implementar um texto bem grande. como faço? quando vou em editar e peço o codigo html fico perdido

  2. Igor, boa noite!
    Cara, muito obrigado mesmo!
    Eu já estava ficando meio maluco, tentando encontrar uma forma de fazer uma barra de rolagem horizontal em que pudesse acrescentar links. Cansei de procurar e já estava desistindo, mas felizmente encontrei seu blog.
    Vou utilizá-la pra fazer uma espécie de "facilitador", para a numeração de páginas.
    Mais uma vez, muito obrigado!
    Um abraço!

  3. Obg, estou seguindo...
    segue de volta?
    http://confde2adolescentes.blogspot.com.br/

  4. Obg, estou seguindo...
    segue de volta?
    http://confde2adolescentes.blogspot.com.br/