Como colocar barra de rolagem nos posts, Gadgets e Widgets em seu blog
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;
Parece complicado, mas não é!
Veja, abaixo, como é fácil personalizar as cores da barra de rolagem:
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:
Aqui vou colocar meu conteúdo,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste.
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>
Aqui vou colocar meu conteúdo,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste
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:
Aqui vou colocar meu conteúdo,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste,teste
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?
Um comentário :
O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.
Assinar:
Postar comentários
(
Atom
)
Olá Cicero, agradecemos o contato e ficamos felizes em saber que o artigo foi útil para você.
ResponderExcluirAbraços Andrew Silva do BG.