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!