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: , , ,

4 Comentários:

Às 2 de novembro de 2011 17:16 , Blogger Miro Fierrer disse...

Cara, curti bastante o código. Agora me fala uma coisa, teria como colocá-lo com a mesma função mas tipo na lista de Links (no caso parceiros)? Tentei substituir a nomechamtura das div pra List-Link mas não rolou. ^^

 
Às 2 de novembro de 2011 21:13 , Blogger Códigos Blogger disse...

Acho que sim, mas qual o endereço do seu blog?

 
Às 3 de novembro de 2011 21:53 , Blogger Miro Fierrer disse...

Queria fazer essa adpatação nesse blog: http://olhaquemaneiro.blogspot.com/

**Em Links Maneiros

 
Às 3 de outubro de 2012 21:14 , Blogger PacsNerds disse...

Não tem como aumentar a letra dos marcadores no efeito hover??? também quando passa a seta do mouse em cima da coluna ela fica "bagunçada". Por favor se puder me ajudar. Meu blog:
http://pacsnerds.blogspot.com.br/

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial