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.
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:
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 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:
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.
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.
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: