quinta-feira, 15 de setembro de 2011

Marcadores em colunas com efeito Hover

Existem casos de blogueiros que criam uma enorme lista de marcadores. Por esse fato, quando o mesmo coloca um gadget de marcadores no blog fica aquela lista que ocupa toda a coluna afetando a organização do layout. Enfrentei esse mesmo problema aqui no cblogger, foi então que resolvi dar um basta nisso e encontrar um jeito da única lista de marcadores ser exibida em colunas.

Embora alguns optam por nuvens de tags, fiz questão de dar uma pequena incrementada na lista colocando um em feito Hover, ou seja, efeito quando deixamos o cursor sobre um determinado item da lista.

image

No decorrer do tutorial estarei ensinando também a trocar o fundo do item do menu quando posicionamos o cursor sobre ele. Coloquei um fundo cinza, pois sendo uma cor neutra, cai bem em qualquer template. Agora chega de papo e vamos ao que realmente lhe interessa.

Como deixar em colunas

1. Já feito o login no blogger, acesse o painel principal do seu blog.

2. Clique na guia “Modelo” –> “Editar HTML”.

3. Procure por:

]]></b:skin>

4. Acima dessa tag cole o código abaixo:

.list-label-widget-content {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}

.list-label-widget-content li {
-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

.list-label-widget-content li:hover {
-webkit-transition:All 0.5555s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
background: whitesmoke;
border-radius: 2px;
color: #666;
border-radius:3px;
text-align: center;
font-size: 12px;
font-weight: bold;
}

Personalizando

Você deve ter percebido que no código existem algumas partes em destaque. Veja o que são cada uma delas:

Vemelho: Quantidade de colunas, altere os 3 em destaque colocando o mesmo valor.
Azul: O azul é a cor do fundo do item quando no estado Hover, altere pra outra cor hexadecimal ou o nome da cor em inglês.
Verde: Corresponde a cor da fonte quando no estado Hover.

Depois de ter personalizado do seu jeito, apenas Salve e pronto! Se conseguiram deixar como queriam, deixem um comentário!

Marcadores: , , ,