31/01/2013

Tutorial.

Trago um tutorial que uso aqui no menu do BSMP.
É bem legal o efeito,sabe a imagem que fica ali no Gadget de saudações,que quando você passa o mouse aparece um menu?
É esse tutorial que vou ensinar.O nome dele é  Menu Fade Image .Aprende ele no Brithday Cake,mas os créditos  também vão pro Kawaii World.
Vamos aprender?

1º - Abra o HTML do seu blog
>Abra a caixa de pesquisa clicando em F3
>Procure por: ]]> </b:skin>
>Acima da Tag encontrada cole o código abaixo:



#aparece:hover #menu{
opacity:1;
}
#menu{
opacity: 0;
position:absolute;
-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-
out;transition: all 1s ease-in-out;
margin-top:-70px;
}
#menu a{
display: block;
padding-right:5px;
margin-left:15px;
padding:2px;
width:80px;text-align:right;font-family:'04b03';font-size:8px;text-transform: uppercase;color:#ff699e;background: white; border-right:5px #fdd95b solid; margin-bottom:1px;-
webkit-transition:all .3s linear;-moz-transition:all .3s linear;-ms-transition:all .3s linear;}
#menu a:hover{border-right:0px #CCC solid;padding-right:6px;}
@font-face {font-family: '04b03';url(http://static.tumblr.com/rozpbz7/j0dm2jpkp/04b_03__.ttf) 
format('woff');}


2º Vá em Layout,adicione um HTML/JavaScript e cole o código:

<div id="aparece"><img src="URL DA SUA IMAGEM" /><div id="menu"><a href="SEU LINK">NOME DO LINK</a><a href="SEU LINK">NOME DO LINK</a><a href="SEU LINK">NOME DO LINK</a><a href="SEU LINK">NOME DO LINK</a></div></div>

Substitua as partes destacadas pelo que seu pedi,e salve.

                                                                   Abraços!

2 comentários:

  1. Seu eu largar a preguiça de fazer
    um menu (eu tem só não exibir çç-) eu
    uso esse menu , é bem legal .
    Fica kawaii !

    #Kisses ♥

    Visite ---> http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. (Risos),fica muito legal,vale a pena fazer.
      Beijos♥

      Excluir

Hei, people <3 Que tal deixar sua opinião, sugestão ou critica (construtiva, por favor) em nossos comentários para que assim possamos melhorar ainda mais! Lembrando, é claro, que nossos comentários são moderados, isto é, precisa de minha aprovação para que apareça. Por tanto, seja educado e se expresse de forma a não ofender a autora do blog ou a terceiros, caso contrario seu comentário não será postado, okay? Até aceito o "seguindo, segue de volta?" desde que eu goste de seu blog, seguirei sem problemas. Sem mais delongas, fique a vontade e volte sempre.
Abraços da autora;
Babi Sah ♥