3 de nov. de 2012

Menu Candy


Oiie meus bolinhos de chocolate com cenoura, tudo bem?!
Hoje eu vim postar um tutorial único, eu que fiz, que é o menu Candy. Igual ao do Pincelando. Mas você pode ver outro modelo dele daqui a pouco. É bem simples, acho bem bonitinho, e foi um dos primeiros códigos de menu que consegui fazer sozinha.


Vai no seu HTML > Dê um Ctrl+F ou F3 e procure por:

]]></b:skin>


Logo acima dessa tag, coloque:

/*Menu Candy by Pincelando o Céu*/
candy{
background: #F4F4FC; /*Background*/
color: #000000; /*Cor da Fonte*/
font-family:arial; /*Fonte*/
border-left: 6px solid #C7F0C3; /*Borda da Esquerda*/
border-right: 6px solid #F4C7E5;/*Borda da Direita*/
-webkit-transition-duration: .900s;
text-shadow: 1px 1px 1px #D3D3D3; /*Sombra no Texto*/
padding: 6px;
width: 92%; 
float: left;
margin: 2px;
padding: 2px;
}
candy:hover{
background: #FAFAFA;/*Background no Hover*/
color: #696969; /*Cor da fonte no Hover*/
font-family:arial; /*Fonte no Hover*/
border-left: 6px solid  #F4C7E5; /*Borda da Esqueda no Hover*/
border-right: 6px solid #C7F0C3; /*Borda da Direita no Hover*/
text-shadow: 1px 1px 1px #D3D3D3;  /*Sombra no Hover*/
width: 92%; 
float: left;
margin: 2px;
padding: 2px;
}
/*Final do Menu Candy by Pincelando o Céu*/


Já tem tudinho bem explicado, se quiser apagar depois os códigos ao lado...só peço que sempre creditem o pincelando. Nessa parte:

width: 92%; 
float: left;
margin: 2px;
padding: 2px;
}

Se você souber pode alterar, mas se não, deixe assim, ou pode dar erro no seu código. Aprendi a usar /* no The-Lovers, mesmo é claro não tendo copiado o código.

Qualquer coisa é só me avisar! Espero que tenham gostado, usem qualquer cor, tamanho, espessura, borda...:)

PS:> A Carol do Heart Cake, me pediu o efeito do menu de Destaques. Qual menu você está falando flor?!

Um beijo bem grandão, até a próxima :3


9 comentários:

  1. Amei o tutorial, até favoritei aqui. Beijos!

    Nosso Capricho
    ► apsmass.blogspot.com ◄

    ResponderExcluir
  2. u3u Amei o tuto, sempre quis saber como fazer *-*

    Bom, o menu que eu estava falando era o de "Destaques" (primeiro da barra lateral) do seu blog de testes, o Live Preview's | Pincelando o Céu. Achei muito bonitinho ;3
    O menu Roll Right também é muito fofo ^3^
    Bom, se puder postar o tuto de um dos dois menus, ficarei muito feliz, mas se não puder também, não ficarei triste ;D

    Obrigada ^333333^ | Kissus ;*

    ResponderExcluir
  3. ameei.. vou usar em um lay free que eu tô fazendo..

    beijos
    http://mrs-fireworks.tk

    ResponderExcluir
  4. Que blog mais fofo e lindo , já estou seguindo , o menu também é bem
    bonito!

    Se puder visite?
    http://revolutionstartshere-oficial.blogspot.com.br/

    ResponderExcluir
  5. Q fofo *-----------* amei o menu, muito meigo =D
    fashion em cores (.com)

    ResponderExcluir
  6. Esse menu é muuuito fofo, adorei o tutorial!
    É a primeira vez que passo por aqui e eu ameeeeei seu blog, ele é superfofo, organizado, postagens ótimas... estou seguindo, se gostar segue de volta? camilaejustin.blogspot.com Beeijos >.<

    ResponderExcluir
  7. Linda como eu coloco ele no gadget? tipo com que código?
    Beijoos! >.<

    ResponderExcluir
  8. Oi amei o blog,e esse menu é muito cute

    s2devidro-oficial*.*blogspot.com
    retire as estrelinhas

    ResponderExcluir

Olá, aqui temos uma Mini F.a.q pra te auxiliar:

-Não aceitamos Tags e Selinhos
-Precisa de uma Postagem? Pode comentar :)
-Afiliação? Somente na página sobre como se afiliar. Pedidos nos comentários serão desconsiderados
-Por favor, sem xingamentos para o bem de todos
-Nunca deixe a URL do seu blog no final do comentário, o blogger considera isso SPAN e exclui seu blog :(
-Por favor não plageie.
Mais alguma pergunta? Comente aqui ou Leia nossa F.a.q completa

Obrigada