Uma maneira de se ganhar um pouco mais de espaço em alguns elementos no blog é inserir uma Barra de Rolagem. Existe um modo fácil de inseri...

Colocar Barra de Rolagem no blog

Uma maneira de se ganhar um pouco mais de espaço em alguns elementos no blog é inserir uma Barra de Rolagem.
Existe um modo fácil de inserir Barra de Rolagem em qualquer parte do blog, seja apenas em determinados gadgets da sidebar separadamente, fazendo rolar o conteúdo do widget, ou até mesmo na área de postagem.
Requer apenas uma configuração no código CSS referente ao elemento que você quer inserir a Barra de Rolagem.

Barra de Rolagem em determinado widget da Sidebar:

Digamos que em sua sidebar você tem um gadget de Videos, e exatamente nesta única coluna que você quer inserir uma barra de rolagem, para fazer rolar o contéudo.
Vá em design >> Editar HTML >> Expandir modelos de widgets e procure pelo código referente a este widget que você tem instalado na sidebar.
Que deve ser assim:

<b:section class='sidebar' id='sidebar-bottom' preferred='yes'>
<b:widget id='VideoBar1' locked='false' title='Barra de vídeo' type='VideoBar'>
Note que no ínicio do código tem widget id=’VideoBar1′
é para esta ‘id’ que você deverá criar os estilos no código CSS.
Para isso procure pela tag ]]></b:skin> 
e cole ANTES dela o código a seguir:


#VideoBar1 .widget-content{height: 160px;overflow: auto;}
Salve as modificações!
height: 160px; é a altura total que terá o gadget.
O comando overflow: auto; faz como que a barra de rolagem apareça automaticamente, apenas se altura do gadget ultrapassar os 160px.
Deste modo somente o conteúdo do widget ‘Video’ terá uma barra de rolagem, deixando o título fixo, assim como está aqui neste blog de teste.
Utilize o mesmo procedimento para cada widget que você queira fazer rolar o conteúdo atráves de uma barra de rolagem, alterando apenas o nome da ‘id’ de cada widget, não esqueça!
Altere o valor de height se preferir.

Barra de Rolagem na área do post:

Vá em design >> Editar HTML >> Expandir modelos de widgets e procure por: .post-body
E acrescente as linhas:

height: 400px;
overflow: auto;
Devendo ficar mais ou menos assim:

.post-body {
 margin:0 0 .75em;
 line-height:1.6em;
height: 400px;
overflow: auto;
}

0 comentários: