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:






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.




8 comentários:

  1. anw amei o menu *-*
    # cute-bii.blogspot.com

    ResponderExcluir
  2. Que lindinho o menu :3 adorei!
    quemprecisadetvparaverbeyonce.blogspot.com

    ResponderExcluir
  3. bem explicadinho , vc mudou o theme? amei

    quaseprincipa.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Mudei sim Vanussa ><
      Que bom que você gostou.

      Excluir
  4. Oi te mandei convite no face,m adciona lá bjs

    ResponderExcluir
    Respostas
    1. Já aceitei simone e deixei um recado pra vooc na inbox.

      Excluir

Deixe seu Link que eu retribuo :))