Inserir barra de rolagem em gadgets

O blogger possui diversos gadgets úteis, porém o tamanho deles pode ser algo prejudicial para a navegação do seu blog, uma vez que eles podem ser muito grandes e aumentar significantemente o tamanho da sua barra lateral e deixar seu blog com uma aparência de desorganização.

Diminuir o tamanho dos gadgets e colocar uma barra de rolagem neles pode facilitar muito, tanto no quesito navegação quanto na aparência. Aprenda neste tutorial como aplicá-la!

1 Vá em Tema > Editar HTML > Clique na caixa de códigos > Aperte Ctrl + F ou F3 > Procure pelo nome do gadget que você deseja aplicar a barra de rolagem > Pegue a identificação do gadget, como mostra na imagem.


2 Procure por ]]></b:skin> > Acima desta tag você deverá criar o código CSS para a identificação que você pegou no passo anterior.

Para criar o código CSS para a identificação que você pegou, você deverá seguir este modelo:
#identificação {
<atribuições>
}
A parte destacada é obrigatória, onde está escrito identificação, você cola a id que você copiou no primeiro passo.

3 Dentro das chaves ( <atribuições> , no passo anterior) cole o seguinte código:
Na parte "200px" você coloca a altura máxima que o gadget poderá ter, e que se passar desta altura, aparecerá uma barra de rolagem.

4 Faça as alterações e salve.

5 Este mesmo método pode ser utilizado para colocar barra de rolagem na área das postagens. Em vez de procurar pela identificação do gadget, procure por .main-inner .column-center-outer { e dentro das chaves, cole o mesmo código do passo 3.
Compartilhe no Facebook
Compartilhe no Twitter
Compartilhe no Google+

4 comentários, comente também!

  1. Adorei o tutorial, é bom que deixa o blog mais organizado e menos poluído, porque esse gadget ocupa quase a página inteira uashush'.

    Então, eu comecei um blog agora, e ele tem o mesmo objetivo que o We Heart HTML. Se quiser dá uma passadinha depois.
    http://cinnamo-n.blogspot.com.br/

    Beijos, e eu adoro o seu blog, tanto que está na minha página de créditos -q

    ResponderExcluir
  2. Ótimo tutorial, não sabia que dava para fazer isso.

    Equalizando - [visite, baby]

    ResponderExcluir
  3. Olá Alan! Quanto tempo não comento aqui. T^T
    Não sabia que dava para fazer isso! Achei o tutorial bem legal. *u*
    Beijos,

    http://designer-lovers.blogspot.com.br/

    ResponderExcluir

• Peça tutoriais em 'Contato'
• Comente com o link do seu blog para que eu posso visita-lo
• Você pode usar as Tags negrito, itálico, links...

Créditos



O Projeto Aurora foi criado completamente, com tutoriais disponíveis no blog, por mim, Alan Felipe Jantz.

Para as postagens 'reblogadas', os créditos do local de origem dos tutoriais está no final da postagem.

Todos os ícones utilizados neste template foram pegos no flaticon.com, todos os direitos reservados para os autores dos mesmos.





Algo que é seu está aqui, mas não foi creditado?
Entre em contato clicando na aba 'Contato' do menu para receber seus créditos!
BouquetNOVO
The Only ExceptionNOVO
Wide AwakeNOVO
Simple BaseNOVO
NatureNOVO
Why so Pink?NOVO
Why So Blue?NOVO