Colocar barra de rolagem em qualquer elemento do blog

em 18 de maio de 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!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

4 comentários , comente também!

  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

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…