Colocar barra de rolagem em qualquer elemento do blog - * Blog Elaine Gaspareto *

Colocar barra de rolagem em qualquer elemento do blog

em 18/05/2015

O tutorial de hoje é daqueles bem rapidinhos, fast-tutorial!
Vamos lá?

Quando colocamos algum elemento de página muito extenso em nosso blog usar o scroll para economizar espaço pode ser um boa ideia.
Lista de blogs, lista de marcadores (quando forem muitos), arquivo do blog, e qualquer outro gadget que você queira, tudo pode ter o espaço reduzido usando scroll.
Veja o exemplo:

Demonstração do tutorial

Para colocar nos seus gadgets escolhidos é muito simples.
Primeiro você precisa, claro, ter o gadget instalado em seu blog.
Como exemplo vamos usar a lista de blogs.
Vá em Layout/Adicionar um gadget/Lista de blogs.
Coloque os endereços dos blogs que deseja, salve, arraste para onde quer que fique e salve.

Obviamente, se já tiver o gadget instalado pode pular essa parte.

Agora vá à aba Modelo, clique em Editar HTML e dentro da caixa do código tecle Ctrl+F.
Na barra de busca que aparecer digite </b:skin> e tecle Enter para localizar.
Acima dessa tag de fechamento cole este código:

Copiar o código

Atenção agora!
Olhe o código que você acabou de copiar:

#BlogList1{
height: 200px;
overflow: auto;
}

Onde está escrito BlogList1 você substitui pela ID de seu gadget; Essa ID você localiza clicando na seta que exibe os gadgets instalados em seu blog.
Assim:

Cada gadget tem uma ID, então é preciso saber qual é e aplicar o código à ela para funcionar, tá? No caso do meu exemplo o ID é BlogList1.

Onde está escrito height: 200px você altera o valor para a altura que deseja que o scroll apareça. Assim, se o gadget passar de 200px o scroll surge. Esse valor, conforme expliquei, pode ser alterado para mais ou para menos;
Onde está escrito overflow: auto quer dizer exatamente isso: acima de 200px (ou do número que você definir) o scroll é automático, ele aparecerá.

Viu que simples?
Pode aplicar à lista de blogs como no meu exemplo, pode aplicar aos marcadores (Label1), pode aplicar ao arquivo (BlogArchive1), pode aplicar à lista de links (LinkList1), etc...

Gostou?
Enjoy!

6 comentários via Blogger
comentários via Facebook

6 comentários:

  1. Oi,Elaine eu aqui de novo,esta barra de rolagem é muito boa,eu usei no meu blog que sumiu...rsrs...quase tudo do meu blog some..rsrs...muto bom para quem segue muitos blogs assim como eu,fica mais organizado.
    Parabéns bela postagem,bjs

    ResponderExcluir
  2. Elaine vou comentar aqui mesmo coloquei uma postagem no meu blog com link para o seu.
    Depositando créditos do cabeçalho,banner e artigos relacionados que usei aqui do seu blog.
    Usei uma imagem de bebe...rsrs....
    Obrigada valeu,bjs

    ResponderExcluir
  3. oi ei tem como me ajudar? baixei um template e instalei no meu blog mais quando eu coloco um banner e quando eu clico vai pra este site http://amostragratisbrindes.blogspot.com.br/ ai eu mudei o template baixei outro mais continuo do mesmo jeito tem como me ajudar ??

    ResponderExcluir
  4. valeu a dica estou começando agora com blog e estou adorando as dicas.

    ResponderExcluir
  5. OLá eu tenho o meu blog e o template já veio com a barra do breking news só que eu ñ sei como adicionar informação ou conteudos dentro da barra do breaking news como faço para introduzir a informação?

    ResponderExcluir
    Respostas
    1. António, templates externos, baixados da internet, variam muito em relação aos códigos. Minha sugestão é que procure o desenvolvedor do seu template e solicite o suporte dele, devido justamente às diferenças que esses templates podem apresentar.
      Atenciosamente

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



No Instagram