Tutorial: Menu de Tags

Oláa!

Eu estou completamente cansada, tive que fazer uma pesquisa de 17 páginas para Português, e olha que o ano letivo mal começou. Mas dei um tempinho de vir aqui para apresentar um tutorial, graças a falta de novidades. Bom, eu nunca apresentei menus aqui, sempre foram tutoriais mais simples, mas, acho que já chegou a hora de pelo menos apresentar um. Este é bem simples e fofo, realmente adoro ele. Neste atual layout, estou o usando para as tags. Abaixo, uma preview.

Claro que você pode alterar as cores de acordo com seu gosto. Vamos aprender como fazer?

Vá em modelo >> Editar HTML >> Ctrl + F e procure por:

]]></b:skin>

Quando achar, cole acima da tag:

.fortutos a { 

display : block;

font-family: 'silkscreen';

margin: 1px;

text-transform: uppercase;

font-size: 10px;

color:#fff; /* cor da fonte /*

border-left:6px solid #97b1c1; /* cor da borda */

background:#c8d6de; /* cor do fundo do menu */

text-shadow: 1px 1px 1px #b0c4cf; /* cor da sombra do texto */

padding: 5px 10px 3px 3px;

-webkit-transition: all 0.4s ease;

-moz-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;}

.fortutos a:hover{

padding-left: 13px;

border-left:6px solid #668ca4;

-webkit-transition: all 0.4s ease;

-moz-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;}

Agora, coloque num gadget HTML/ JavaScript o qual você quer que o menu apareça:

<div class="fortutos">
<a href="LINK"> NOME </a></div>
<div class="fortutos">
<a href="LINK"> NOME </a></div>
<div class="fortutos">
<a href="LINK"> NOME </a></div>
<div class="fortutos">
<a href="LINK"> NOME </a></div>
<div class="fortutos">
<a href="LINK"> NOME </a></div>

Espero que tenham gostado do tutorial :) O código foi tirado do Sweet of Cherry, mas o editei para ficar mais fácil compreende-lo.

Beijos