Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

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.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

12 Comentários

  1. .:: Clau ::. disse:

    Gabriel
    Vc tem que localizar no seu template a "id" referente a sidebar e aplicar o código CSS nesta "id".

  2. Artistas Modificados (Gabriel) disse:

    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…

  3. Luciano Beckman. disse:

    Obrigado! Mais uma vez me ajudou!

    SM!

  4. gerardown.net disse:

    Massa, Gostei!!
    Valeuu!

  5. .:: Clau ::. disse:

    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.

  6. Equipe Blog disse:

    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

  7. ::Clau:: disse:

    Gabriel Freitas:
    Ao invés de aplicar em .post-body aplique em: .post

  8. Gabriel Freitas disse:

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

  9. dugabowski disse:

    Ótima dica. Funcionou direitinho no meu blog. Parabéns.

  10. Kakashi disse:

    @.:: Clau ::.
    vlw clau, consegui

  11. .:: Clau ::. disse:

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

  12. Kakashi disse:

    como eu coloco a barra de rolagem nos comentários?

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.