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 dosmarcadores 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 dosmarcadores 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.
CASO TENHA DUVIDA VEJA A MATÉRIA NA FONTE:
OUTRA DICA DE OUTRO BLOG:
O tutorial, como dito no título da postagem, é sobre como colocar uma barra de rolagem no gadget de 'Arquivos do Blog', que é aquele que separa todas as postagens por ano, mês, dia.. Ele é muito bom, mas sempre é enorme dependendo do número de postagens de seu blog. Então, para deixa-lo menor, você pode colocar uma barra de rolagem nele. Vamos lá!
1. Vá em Modelo > Editar HTML > Clique na caixa de códigos e procure por ]]></b:skin>, acima cole:
#BlogArchive1{A parte destacada em negrito é a altura do gadget, mude para a altura que quiser e salve! Tchau :3
height: 200px;
overflow: auto;
}
