Photobucket

15 de mar de 2008

Barra de rolagem na área de postagem

Hoje vou ensinar mais um 'truque' bem simples e diferente, que se usado com um layout pensado, pode deixar seu blog bem bonito.
Esse truque é a barra de rolagem na área postagem, que fica interessante se seu blog tiver 'altura' fixa.

Vamos lá:

ATENÇÃO: Sempre que for alterar algo em seu blog não se esqueça de salvar uma cópia de segurança!

Não precisa expandir modelos widgets!

O primeiro passo é encontrar esse trecho do seu código:

#main-wrapper {
width: 525px;
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 */
}

Agora adicionaremos uma altura (height) para esse trecho, eu colocarei 400px, mas você pode o tamanho que quiser (claro, né!). O trecho ficará assim:

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


É hora de colocar a barra de rolagem! Perceba que a propriedade que define isso já está nesse trecho, se trata de OVERFLOW. Você só precisará trocar HIDDEN por AUTO.

Se quiser pode apagar o texto entre /* e/* , só tome cuidado para não apagar mais que isso!

O trecho deverá ficar assim:

main-wrapper {
height: 400px;
width: 525px;
float: $startSide;
margin: 30px 0 0 4px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: auto;
}

Visualize seu blog e pronto! Você já tera uma barra de rolagem no seu blog!

Se quiser personalizar sua barra veja essa dica, mas só funciona no Internet Explorer!

9 Comments:

kaah said...

Oii..
eu queria bem esse tipo de dica..
só que queria colocar coor na barra.
olha meu blog
petit.stupid-luv.org
é no mozilla..
tem como tu ensinaar?

beeijos

kaah said...

as desculpa, só li agora, que só IE deixa fazer isso..

beeijos

said...

Kaah: Já tem um post explicando isso, e é bem fácil, só que por enquanto só o IE que aceita mesmo.
Seja sempre bem-vinda...

Beijos

kel said...

muitíssimo obrigada! estava louca procurando como fazer isso pela internet inteira, você me salvou! aliás, o tutorial está muito bem explicado, parabéns

said...

Kel: Oi, moça! Obrigada você!! Precisando só falar!

admim said...

amigo eu ja tentei de tudo mais ñ acho no codigo do meu blogspot o codigo que vc falou para poder colocar a barra de rolagen no meu blog, oq eu devo faser para faser isto se vc suber outra possoa suber me manda um e-mail com a resposta ederdcd@yahoo.com.br obrigado por que me ajudar!!!

bad said...

VAlew... brother!!!

O Tuto. está bem explicado!!!

rogerio raia said...

nossa muito obrigado pela ajuda que você me deu parabéns esmo tudo de bom

Digital Master Downloands said...

tem como deixar em todas as paginas de postagem do blog pode me ajudar. obrigado