Como Colocar Barra de Rolagem nos Gadgets no Blog
Como modificar o HTML para colocar barra de rolagem no blog. Veja como adicionar barras de rolagem em qualquer gadget do seu blog apenas colocando uma linha de código CSS.
Vamos usar como exemplo como colocar uma barra de rolagem nos marcadores do blog, mas como já falamos isso funciona em qualquer gadget. Então o primeiro passo é saber qual é a id do gadget que deseja colocar a barra de rolagem. No caso dos marcadores do blog é #Label1. Então você precisa adicionar o código da barra de rolagem:
#Label1 .widget-content{height:300px; width:auto;overflow:auto;}
Isso pode ser feito na pagina editar HTML usando o Ctrl F para achar: ]]></b:skin> e colocando o código antes dele. Ou através da pagina personalizar onde podemos abrir uma janela para adicionar códigos CSS no Blogger (personalizar > Avançado > Adicionar CSS). Se precisar ajuda para colocar o código no blog clique nos links abaixo e achará mais detalhes:
Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F
Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog
Ajuste o valor 300, ele é o tamanho da barra de rolagem. Outro detalhe interessante é que esse código coloca a barra de rolagem apenas no conteúdo do gadget deixando o titulo sempre amostra, mas se quiser incluir o titulo do gadget dentro da barra de rolagem apague o trecho .widget-content (inclusive o ponto).
Para usar essa dica para personalizar outros Gadgets do blog você só precisa trocar a id, por exemplo, o gadget de arquivos do blog é #BlogArchive1, então o código ficaria assim:
#BlogArchive1 .widget-content{height:200px; width:auto;overflow:auto;}
Um jeito fácil de achar a id correta de um gadget é usar o ctrl F na pagina editar HTML e procurar o titulo daquele gadget que deseja e caso seu gadget não tenha titulo adicione um titulo apenas para fazer a localização e depois retire.
Leia também:
Como Personalizar e Colocar Imagem no Titulo dos Gadgets do Blog
Gadget Postagens Populares no Formato de Barras Coloridas
Personalizar Gadgets (Plugins) do Facebook para Blogs e Sites
Essa é uma dica simples que pode ajudar a aproveitar melhor o espaço do seu blog, mas é claro isso não altera em nada o tempo de carregamento da sua pagina, portanto não use isso para adicionar muitos Gadgets no seu site.
Barra de Rolagem nos Marcadores do Blogger
Vamos usar como exemplo como colocar uma barra de rolagem nos marcadores do blog, mas como já falamos isso funciona em qualquer gadget. Então o primeiro passo é saber qual é a id do gadget que deseja colocar a barra de rolagem. No caso dos marcadores do blog é #Label1. Então você precisa adicionar o código da barra de rolagem:
#Label1 .widget-content{height:300px; width:auto;overflow:auto;}
Isso pode ser feito na pagina editar HTML usando o Ctrl F para achar: ]]></b:skin> e colocando o código antes dele. Ou através da pagina personalizar onde podemos abrir uma janela para adicionar códigos CSS no Blogger (personalizar > Avançado > Adicionar CSS). Se precisar ajuda para colocar o código no blog clique nos links abaixo e achará mais detalhes:
Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F
Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog
Ajuste o valor 300, ele é o tamanho da barra de rolagem. Outro detalhe interessante é que esse código coloca a barra de rolagem apenas no conteúdo do gadget deixando o titulo sempre amostra, mas se quiser incluir o titulo do gadget dentro da barra de rolagem apague o trecho .widget-content (inclusive o ponto).
Barra de Rolagem nos Gadgets do Blog
Para usar essa dica para personalizar outros Gadgets do blog você só precisa trocar a id, por exemplo, o gadget de arquivos do blog é #BlogArchive1, então o código ficaria assim:
#BlogArchive1 .widget-content{height:200px; width:auto;overflow:auto;}
Um jeito fácil de achar a id correta de um gadget é usar o ctrl F na pagina editar HTML e procurar o titulo daquele gadget que deseja e caso seu gadget não tenha titulo adicione um titulo apenas para fazer a localização e depois retire.
Leia também:
Como Personalizar e Colocar Imagem no Titulo dos Gadgets do Blog
Gadget Postagens Populares no Formato de Barras Coloridas
Personalizar Gadgets (Plugins) do Facebook para Blogs e Sites
Essa é uma dica simples que pode ajudar a aproveitar melhor o espaço do seu blog, mas é claro isso não altera em nada o tempo de carregamento da sua pagina, portanto não use isso para adicionar muitos Gadgets no seu site.
Marcadores: CSS, Personalizar