Códigos e Scripts Sidebar Vanessa S.
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;
}
Edite o valor de height para a altura que você preferir.
Salve!
Atenção: Este tutorial aplica-se aos antigos modelos de layout (Templates minima). A eficácia da dica aqui apresentada não foi testada nos novos Designer de Modelo.
Gabriel
Vc tem que localizar no seu template a "id" referente a sidebar e aplicar o código CSS nesta "id".
Olá, eu gostaria de saber como eu coloco uma barra de rolagem em toda coluna lateral?
Em que local devo colocar o código para ficar só na coluna lateral? Desde já agradeço pela resposta…
Obrigado! Mais uma vez me ajudou!
SM!
Massa, Gostei!!
Valeuu!
Equipe Blog
Dá uma olhada no tutorial:
Aplicar estilos á página inicial do blog.
Use a condicional da home e aplique o efeito que vc quer.
Olá Clau, muito boa essa dica. Eu já estou usando a barra de rolagem há um tempo, mas sabe o que eu gostaria de fazer? Era deixar a barra de rolagem apenas na página inicial. Quando o visitante abrir o post, eu gostaria que o mesmo aparecesse inteiro sem a barra de rolagem. O trecho em meu blog está assim:
/* Posts
———————————————– */
body .main-inner .Blog {
padding: 0;
margin-bottom: 1em;
height: 800px;
overflow: auto;
Teria como fazer isso?
Grande abraço
Gabriel Freitas:
Ao invés de aplicar em .post-body aplique em: .post
Clau olha só, a barra aqui no meu, ela fica uma barra de rolagem para cada post, olha:http://i35.tinypic.com/2580ads.jpg
E eu queria um só barra para toda a area do pot ..
Ótima dica. Funcionou direitinho no meu blog. Parabéns.
@.:: Clau ::.
vlw clau, consegui
@Kakashi:
Dá uma lida neste post:
Desmembrando a área de comentários. Nele vc vai conseguir entender tudo sobre a area de comentarios no seu blog e assim ver e escolher o melhor lugar pra colocar a barra.
como eu coloco a barra de rolagem nos comentários?