loading...



Para quem desejar colocar uma Scrollbar (barra de rolagem) nas etiquetas do blogue".

Funcionalidade: Scrollbar nas Etiquetas
Plataforma: Blogger
Exemplo de Implementação: Etiquetas


 Exemplo sem Scrollbar;



Exemplo com Scrollbar;



Esta situação pode ser importante quando se tem uma lista enorme de tags (etiquetas), e por essa razão ocupa uma área muito grande, para evitar isso e ainda assim continuar-se com a lista completa  pode-se utilizar esta opção.

Implementação:

No Blogger

Passo 1 - Abrir o painel principal do Blogger.
Passo 2 - Entrar na zona do HTML do Blogger; Modelo > Editar HTML.
Passo 3 - Pesquisar a div que está a envolver as etiquetas (pode ser diferente de blog para blog);

3A - Para isto no menu "Avançar para o Widget" clicar onde diz Label1 (neste caso é 1, mas pode ser outro).


3B - Automaticamente vai aparecer a zona onde se encontra este Widget


Na linha que diz;

.
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

Teremos que acrescentar uma class que depois através do CSS irá aplicar a Scrollbar à caixa das etiquetas, sem que interfira, ou seja sem que seja aplicada a outros Widgets do blogue.

Acrescentando a class;

Na linha acima teremos que acrescentar a class, para isso faremos como está em baixo;

.
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content label-one-scrollbar&quot;'>

Acrestei à linha a class; label-one-scrollbar, portanto onde estava; 

.
data:display + &quot;-label-widget-content&quot;'
passou a estar;

.
data:display + &quot;-label-widget-content label-one-scrollbar&quot;'

Passo 4 - Procurar a zona do CSS.

4A - Dentro desta zona colocamos o código abaixo;

Para copiar o código clicar no ícone abaixo
.label-one-scrollbar {
max-height: 200px;
overflow: auto;
}

Notas: 
- Alterar label-one-scrollbar pela que foi criada por si, se foi a mesma, então deixe ficar assim.
- Pode-se alterar 200px, pela a altura que se queira e gostar mais.

Passo 5 - Guardar o modelo e verificar se está tudo bem, caso exista algum problema verificar se foi efectuado todos os passos correctamente, caso seja necessário repetir todos os passos.



0 comentários :

Enviar um comentário