Como colocar barra de rolagem nos gadgets do blogger

Ohayoooo queridos bunnie's!! Como vão todos? Bem hoje venho trazer um tutorial meio antigo para vocês, porém muito utilizado que é "Como colocar barra de rolagem nos Gadgets". Pode parecer meio complicado devido a explicação longa, mas é fácil, fácil, fácil! Já existe até um tutorial similar aqui no blog, no qual ensino como colocar barra de rolagem na área das postagens, o procedimento é praticamente o mesmo já mudará o local onde vamos adicionar o código para esse resultado.

Brevia do efeito

Você pode ver o resultado no link acima, em marcadores, pode se ver que é um marcador especifico com cor diferente dos de mais, para isso basta seguir esse tutorial como personalizar um gadget especifico, não é difícil de fazer mas precisa de muita atenção se não o código não vai funcionar [como tem muitos comentários de pessoas que não conseguiram]. Mas afirmo que o código é "Ok", tanto que o utilizo na maioria de meus layouts. Sem mais demoras, vamos ao tutorial?

1. O primeiro passo é procurar a tag da sidebar do seu blog, para isso vá em HTML no painel do blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, na barrinha que for aparecer cole o seguinte código e aperte "Enter" para pesquisar: 

Códigos

.sidebar .widget

O nome da tag pode variar do design, então terá que encontrar essa tag, para isso basta procurar por .sidebar ou .widget, em modelos mais antigos o codigo pode ser encontrado por #sidebar ou #widget. 

2. Achou? Se sim, que bom! Se não? Deixe um recadinho ai nos comentários, para que eu possa lhe auxiliar. Beleza? Agora sim, vamos lá! Vamos adicionar o código que fará a barra de rolagem aparecer. Dentro da Tag após a chave você coloca o código abaixo:

Códigos

overflow-y:auto;overflow-x: hidden;height:300px;width: 100%;margin: 0px;

A parte marcada em vermelho é o comprimento do gadget, você pode deixa-lo mais comprido ou menor, aumentando e diminuindo os valores. 

Veja o exemplo:

.sidebar .widget {

overflow-y:auto;

overflow-x: hidden;

height:300px;

width: 100%;

margin: 0px;

background: #fff;

padding: 5px 10px;

border-bottom: 4px Double #d5d3d2;

}

Vermelho: Nome da tag, no qual achamos o gadget.

Azul: São as chaves que abre e fecham o código.

Verde: Códigos que personaliza os gadgets.

Rosa: O código da barra de rolagem. 

Salve e prontinho! Veja o resultado me diga o que achou. Por hoje é só, espero que esse tutorial possa ser útil, beijinhos. =^.^=