Marcadores com efeito Zoom Label

Kon'nichiwa ogenkidesuka? Bom eu estou meio que enferrujada rs' ficar quase 2 meses sem postar da nisso, mas quero agradecer pelos 1110 seguidores, realmente nunca pensei que meu blog poderia chegar a tanto. Comecei o blog apenas como uma distração e nunca pensei que teria tantos leitores e seguidores, então só devo agradecer a vocês por isso. Hoje mesmo vou começar o novo layout para dar inicio ao sorteio e decidir as regras. \o/ Estava em duvida do que sortear então decidi começar sorteando um domínio valido para um ano. Mas vamos logo ao tutorial de hoje, ne?

Brevia do efeito

Hoje eu trago um menuzinho para marcadores, ele é um menu pequeno que ao passar o mouse faz efeito de zoom. Perfeito para quem não gosta de usar tags. Para começar vamos remover as bolinhas pretas que vem nos marcadores se você já tiver removido pule o primeiro passo.

1. Para remover vamos ate o  ]]></b:skin> agora acima cole:

Códigos

 #tabdiv li, .sidebar li {
list-style-type:none;
}

Salve!

2. Agora vá ate seu layout e adicione um gadget de marcadores do blog. Ele deve ficar exatamente como mostro abaixo:

3. Depois disso vá ate seu HTML e procure por  ]]></b:skin> acima adicione este código: 

Códigos

/*Zoom Label By Bunny Crazy--*/ @font-face { font-family: "Pf Arma Five"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); } .cloud-label-widget-content { text-align: center; } .label-size a { float:left; display: block; height: 10px; margin: 2px 2px 0 0; padding: 3px; border: 1px solid #afe7ee; background: #f5f5f5; font-size:8px; color:#666; font-family: "Pf Arma Five"; text-transform: uppercase; text-decoration:none; -moz-border-radius:7px;-webkit-border-radius:7px;-o-border-radius:7px;-ms-border-radius:7px;border-radius:7px; } .label-size a:hover { color: #666; border: 1px solid #afe7ee; background: #eafcff; text-decoration: none; -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s; } 

Verde: bordas
Vermelho: Fundo do menu
Roxo: Cor do texto

 

Arrume as cores como desejar e salve.