18 de set. de 2012

Tutorial: Menu Candy


Olá pessoal!!
Tudo bem com vocês??

Bom, uma novidade aqui, é o Menu Candy.
Da uma subidinha lá na página pra você verem...
(esperando vocês verem...)

Querem aprender??
É fácil, mas leva um tempinho...
Vamos lá??

 Abra o HTML do seu blog aperte Ctrl+F e procure por: ]]></b:skin>
Encontrou? Maravilha! Cole acima de ]]></b:skin> o código abaixo:

/*** MENU CANDY - TOXIC CHERRIES ***/
.menucandy {

background-color:#COR_AQUI; /*** cor do fundo ***/
float:left;
text-shadow: 1px 1px 0 #COR_AQUI; /*** cor da sombra da letra ***/
color:#COR_AQUI; /*** cor da fonte ***/
font-family: century gothic;
width:150px; /*** largura da aba ***/
font-size: 10px; /*** tamanho da fonte ***/
text-align: center;
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-khtml-opacity: .70;
-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}



.menucandy:hover {
background: url(URL_DA_IMAGEM_OU_COR_AQUI); /*** imagem/cor do fundo ***/
float:left;
color: #COR_AQUI; /*** cor da fonte ***/
text-shadow: 1px 1px 0 #COR_AQUI; /*** cor da sombra da letra ***/
-khtml-opacity: .70;
-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}


Depois de colar o código, é só fazer as alterações, que o próprio Código diz. Mas se tiver alguma dúvida, é só perguntar ok?
DETALHE:Se não quiser as bordas arredondadas no menu, basta retirar o que esta em negrito no código.

Salve, e depois adicione um Gadget HTML/Javascript com esse código:

<div class="menucandy"><a href="LINK_AQUI">NOME_DO_LINK</a></div>
<div class="menucandy"><a href="LINK_AQUI">NOME_DO_LINK</a></div>
<div class="menucandy"><a href="LINK_AQUI">NOME_DO_LINK</a></div>
<div class="menucandy"><a href="LINK_AQUI">NOME_DO_LINK</a></div>

É só fazer as alterações que se pedem, e depois salvar. Veja como ficou, até ficar do seu gosto...

Créditos: Toxic Cherries
Bom, por enquanto é só!!

2 comentários:

  1. Que lindo menu Pâm !
    Parabéns , muito sucesso com o Loving Much hein !!
    Dá uma passadinha ?
    www.terra-da-cereja.blogspot.com

    Beeeiiijoooos <3

    ResponderExcluir

Informações Básicas de Comentários(IBC):
-Ler não mata, então leia o post antes de comentar
- Não serão aceitos comentários ofensivos.
- Aceito pedidos para seguir, se estiver seguindo o blog...
- Respondo e retribuo todos os comentários.


Obrigada por Comentar!!