Widget de artigos relacionados - nRelate

Barra de Rolagem

Neste artigo, vamos explicar como colocar a barra de rolagem em seus posts, Gadgets ou Widgets. É um artificio simples, usando css com a propriedade overflow.

Muitos blogs tem a necessidade de aplicar este efeito em seus posts ou Widgets, pois seus conteúdos são grandes e deixam a página cansativa para a leitura. Pensando nisso é que, nós do BG, resolvemos criar este post para esclarecer e ensinar a manipular esta propriedade css em seu blog.

Como o título já diz, a barra de rolagem nada mais é do que um artifício que lhe ajuda a ganhar espaço dentro do seu blog em qualquer situação que exija um conteúdo mais curto e de fácil leitura, pois muitas vezes o conteúdo é grande e extrapola as dimensões do template ou da área em que o mesmo se encontra. Seja uma imagem, um texto ou um conjunto de códigos a ser mostrado.

Você sabe para que serve o overflow?

O estilo css overflow determina como o conteúdo vai se comportar, caso ultrapasse as dimensões determinadas no local que você selecionou.

Exemplo: Se você tiver uma imagem ou texto ou mesmo um conjunto de códigos e criou uma caixa com uma largura de 300 px por 300 px e o conteúdo que você colocou ultrapassa essas dimensões, a propriedade overflow vai determinar se o conteúdo vai ser oculto ou se vai criar uma barra de rolagem, ou se o conteúdo irá saltar para fora da caixa, ignorando as dimensões determinadas na caixa criada.

Agora, veja as propriedades abaixo:

overflow: visible; → o conteúdo que ultrapasse as medidas determinadas ficará fora da caixa.

overflow: hidden; → todo conteúdo que ultrapassar as medidas determinadas na caixa ficará oculto, não existindo uma barra de rolagem para ver o restante.

overflow: scroll; → todo conteúdo que estiver dentro da caixa terá uma barra de rolagem, mesmo que suas dimensões não ultrapassem as medidas da caixa.

overflow: auto; → todo conteúdo que ultrapassar as medidas determinadas na caixa terá uma barra de rolagem. Caso o conteúdo não ultrapasse as medidas da caixa determinada, não existirá a barra de rolagem.

Você já deve ter notado que em alguns sites ou blogs as barras de rolagem possuem cores para dar um destaque na área que o conteúdo está sendo mostrado.

Pois bem, essas cores nas barras de rolagem também são determinadas nas folhas de estilos css. Neste caso, o estilo da caixa que vamos criar.

Para personalizar as cores, é necessário inserir os código abaixo:

scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000;



face-color - Cor do botão (parte da barra que você clica e arrasta)
highlight-color - Cor do contorno do botão
shadow-color - Cor da sombra (parte intermediária)
darkshadow-color - Cor da sombra (parte mais escura)
3dlight-color - Cor do contorno para dar impressão de 3D (parte da luz)
arrow-color - Cor das setinhas no botão superior e inferior
track-color - Cor do fundo (caminho)

Tutorial

Agora, vamos criar uma caixa com uma barra de rolagem para ser inserida como postagem, Gadget ou Widget em seu blog.

Primeiro, vamos criar uma caixa e determinar a largura, a altura e suas margens:

<div style='width:300px; height:150px; margin-left:auto; margin-right:auto;'>Aqui vou colocar meu conteúdo,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste.</div>

O código destacado em vermelho refere-se a largura, altura e margem.

O efeito do código citado acima será assim:


Agora, vamos colocar uma cor ou imagem no fundo da caixa. Para isso, vamos acrescentar o estilo dentro do código da caixa com as seguintes tags → background-color:#000000; para cor ou → background-image:url('endereço da imagem'); para imagem.

Desta maneira, o código ficaria assim com cor no fundo:

<div style='background-color:#1E90FF;width:300px; height:150px; margin-left:auto; margin-right:auto;'>Aqui vou colocar meu conteúdo,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste.</div>

O mesmo pode ser feito com a imagem!

Você notou que o conteúdo está muito grande, e por não definirmos a propriedade css overflow, o conteúdo saiu para fora da área da caixa? Por isso, vamos acrescentar o estilo overflow e colocar a barra de rolagem.
Mantendo o padrão da nossa caixa, vamos apenas acrescentar o código de css overflow e determinar o comportamento do conteúdo.

Vamos colocar o seguinte código: overflow: auto; dentro do código da caixa, mantendo o conteúdo visível e, ao mesmo tempo, organizado. Vamos pegar nossa caixinha:

<div style='background-color:#1E90FF;width:300px; height:150px; margin-left:auto; margin-right:auto;'>Aqui vou colocar meu conteúdo,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste.</div>
<div style='overflow: auto; background-color:#1E90FF;width:300px; height:150px; margin-left:auto; margin-right:auto;'>Aqui vou colocar meu conteúdo,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste.</div>

O efeito será esse:



Agora, veja o mesmo efeito com uma imagem:


Para mudar a cor e o estilo da barra de rolagem da área onde está o conteúdo, acrescente esses estilos dentro do código da caixa:

scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000;

Mude as cores conforme descrito no topo desta postagem. Os códigos acima devem ser inseridos logo após overflow: auto; como no exemplo abaixo:

<div style='overflow: auto;scrollbar-face-color: #000000;scrollbar-highlight-color: #000000;scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000;scrollbar-arrow-color: #000000; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000; background-color:#1E90FF;width:300px; height:150px; margin-left:auto; margin-right:auto;'>Aqui vou colocar meu conteúdo,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste.</div>

Gostou deste artigo?