Como colocar uma barra de rolagem no blog

Como colocar uma barra de rolagem no blog

A grande maioria dos "programadores" de blog ou programadores de sites, necessitam ou ja se interessaram por usar uma barra de rolagem para obter um maior espeço em certas partes do site ou blog.
Neste artigo você verá de forma fácil como inserir esta barra de rolagem em qualquer área que precisar. Ela pode ser especialmente utilizada dentro de gadgets e/ou postagens para fazer uma citação por exemplo, muito útil até para aplicações que voce nem tenha pensado ainda com a finalidade de fazer rolar o conteúdo do widget (ou qualquer outra área) mas mantendo a página fixa. Vamos ao artigo.
Requer apenas uma configuração no código CSS referente ao elemento que você quer inserir a Barra de Rolagem.

Créditos para: Mundo Blogger

1º Barra de Rolagem em determinado widget da Sidebar:

Caso voce possua em seu blog um gadget de vídeos por exemplo e é apenas neste gadget que deseja aplicar uma barra de rolagem por conter muito vídeos afim de reduzir o espaço gasto.

Entre no seu blog em DESIGN -> EDITAR HTML -> Expandir modelos de widgets e procure pelo trecho de código referente ao widget que você tem instalado na sidebar e deseja modificar.
Para um widget de vídeos deve ser mais ou menos este:


<b:section class='sidebar' id='sidebar-bottom' preferred='yes'>
<b:widget id='VideoBar1' locked='false' title='Barra de vídeo' type='VideoBar'>
Verifique o id do widget que voce deseja, neste caso note que no ínicio do código tem widget id='VideoBar1' é para esta id que você deverá criar os estilos no código CSS.

Primeiramente procure pela tag:
 ]]></b:skin>
E logo acima dela cole o seguinte trecho: 
#VideoBar1 .widget-content{height: 160px;overflow: auto;}

Pronto, seu widget terá uma barra de rolagem e para personalizar faça assim.
height: 160px; é a altura total que terá o widget, esta será a altura que a barra de rolagem terá, para aumentar ou diminuir basta modificar esta propriedade.
overflow: auto; faz como que a barra de rolagem apareça automaticamente, apenas se altura do gadget ultrapassar os 160px ou o valor que voce definir.
Desta maneira apenas o conteúdo do widget que voce escolher terá uma barra de rolagem.

Assim, para cada widget que voce quer aplicar a barra de rolagem basta colocar estas duas propriedades acima dentro da id referente ao widget, caso o widget já possua uma propriedade id própria, não precisa voce colocar uma nova, basta acrescentar as propriedades height e overflow dentro da id.

2º Barra de Rolagem em uma postagem:

Entre no código-fonte de seu blog através de: DESIGN -> EDITAR HTML -> Expandir modelos de widgets e procure pela tag abaixo:
.post-body
E coloque dentro desta classe as seguintes propriedades:

height: 400px;
overflow: auto;
Com resultado ficará mais ou menos assim o código total:

.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
height: 400px;
overflow: auto;
}
Voce deverá modificar os valores de height para a alutra que voce desejar.


Ao editar, visualize e caso não contenha erros em seu template salve!