Marcadores em colunas com efeito Hover

Aprenda agora, como fazer um Menu com efeito Hover:,

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!