Tutorial: Menu em Hover Candy

OiOi gente!!
Hoje eu vim trazer pra vocês um tutorial super simples de um menuzinho para links em Hover que fica como esse:

Menu Menu Menu Menu Menu

Na verdade eu nem sei porque coloquei o nome de Candy,Apenas achei ele muito fofo e usável.
Bora ao Tuto?!



Primeiro vá em modelo > editar html > e procure por ]]>

Acima Cole:

/*Menu Candy- My dreams---------------
-------------------------------------*/
menucandy {font-family:Comic Sans MS;/*fonte*/letter-spacing: 1px; font-size: 11px;/*tamanho da fonte*/ line-height: 15px; display: inline-block;
background:#ffffff;/*cor do fundo*/color:#DB7093;/*cor da fonte*/  float: left; width: 100%; padding: 4px;  text-align: center;
text-shadow: 2px 2px 3px #FFC0CB;/*sombra do texto*/  }
menucandy:hover {font-family:Comic Sans MS;/*Fonte em Hover*/ letter-spacing: 2px; font-size: 12px;/*tamanho da fonte em hover*/ line-height: 17px; display: inline-block;
background:#DB7093;/*cor do fundo em hover*/color:#ffffff;/*cor da fonte em hover*/ float:left; width: 100%; padding: 4px;  text-align: center;
text-shadow: 2px 2px 3px #FFC0CB; }
faixa {font-family:Comic Sans MS; letter-spacing: 1px; font-size: 11px;line-height: 15px; display: inline-block;  background: #DB7093;/*cor da faixa de cima*/color:#fff; width: 105%; padding: 2px; float:left;  border-top-left-radius: 0px; border-top-right-radius: 0px; text-shadow: 2px 2px 3px #eee;}
faixa2 {font-family:Comic Sans MS; letter-spacing: 1px; font-size: 15px; line-height: 19px; display: inline-block;  background:#DB7093;/*cor da faixa de baixo*/color:#fff; width: 105%; padding: 2px; float:left; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; text-shadow: 2px 2px 3px #eee;}
/*------------------------Fim do Menu Candy----------------------------*/

Agora você vai em  layout > adicionar gadget > html/javascript
e cola o seguinte codigo

<div style="position:absolute; width:80px; left: 0px ; top:0px; padding-top:0px; z-index:2;">
<center><faixa> </faixa>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<a href="LinkAqui"><menucandy>NOME</menucandy></a>
<faixa2></faixa2></center>
</div>

Atenção

  1.Na hora de editar a localização do menu na sibedar você deve prestar bastante atenção...
Onde está left: 0px ; top:0px;  é definido o lugar e a altura.
Se a sua Sidebar esta a Direita o Left fica em 900px  e se a sua sidebar é a esquerda o left fica em 15px.
Já a Altura você define como quiser na minha opinião fica melhor em 20px.

  2.Onde está escrito em Negrito, são as informações que você pode alterar.

  3.Caso você queira adicionar mais um link, você cola a tag

<a href="LinkAqui"><menucandy>NOME</menucandy></a>

antes de <faixa2></faixa2></center>.

Espero que vocês gostem..
Caso utilizem Favor Creditar ao Blog My Dreams.