Tutorial - Menu Hover

Olá pessoas, hoje estou super feliz por que? Por que hoje vai ter festa junina onde eu faço GR õ/ e não é só pela dança não, vai ter cachorro quente *u* 
então, eu demoro um pouco para postar no blog porque tento procurar algumas músicas para ouvir, só que não sei nenhuma, então se vocês souberem alguma musica, por favor avise-me, eu necessito de música para postar Ç_Ç
Enfim... hoje eu trouxe um tutorial para vocês bem legal, esse tutorial se chama Menu Hover, é aquele que quando você passa o mouse na imagem aparece o menu. Peguei este tutorial no blog Crazy HTML no final do post coloco os créditos ok?
Para quem nunca viu clique aqui   <--
Ele é simples de fazer, mais tem que prestar BASTANTE atenção!!
Let's Go ->
1. Vá no HTML do seu blog, e procure pela tag ]]></b:skin> quando acha-lá cole o código abaixo, antes dela.
/* --- Imagem ------- */
.imagem{background: url('URL da imagem') top left no-repeat; width: 220px; height: 300px;}

/* --- Menu ------- */
.menu{width: 210px; position: absolute; opacity: 0; -webkit-transition: all 1s ease; -moz-transition: 
all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; margin: 5px;}
.menu a, .menu span{background: #b7a89f; color: #ffffff; text-shadow: 1px 1px 0 #9f8b7d; text-align: center; 
font-family:"04b03", small fonts; font-size:8px; text-transform: uppercase; border-left: 4px double #9f8b7d; 
cursor: pointer; display: inline-block; margin: 1px 1px 0px 0px; padding: 5px 0; display: inline-block; width: 47%;}

/* --- Hover do menu ------- */
.imagem:hover .menu{opacity: 1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}

/* --- Fonte ------ */
@font-face {font-family: "PF Tempesta Seven Condensed";
src: url('http://static.tumblr.com/8yo5xxv/b5cm22t2y/pf_tempesta_seven_condensed.ttf'); format("truetype");}

 Modifique algumas coisas com o seu gosto ;)

2. Agora você irá no Layout do seu blog, e adicionar um HTML/JavaScript e colar o código abaixo.
<div class="imagem"><div class="menu"><a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a><a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a></div></div>

Está tudo explicado, mude as partes em negrito colocando seu link ;)
Créditos ao blog  - TTHY // Crazy HTML

10 comentários:

  1. Eu adoro esse menu ^^

    >> bleeding-freaks.blogspot.com

    ResponderExcluir
  2. Flor cade meus créditos? :s
    Beijos
    Crazy-HTML

    ResponderExcluir
  3. Amo esse menu.
    Flor aceito afiliação sim.

    xoxo
    http://radioactive-pandas.blogspot.com/

    ResponderExcluir
    Respostas
    1. Ok, posso ser afiliada do teu blog? >3<

      Excluir
    2. Claro que sim flor, só vim avisar que eu mudei de nome e Url. Agora o Radioactive Pandas é Counting Stars ☆ ~.

      enjoy~
      http://c-ountingstars.blogspot.com.br/

      Excluir
  4. Acho muito fofo esse menu :3 seguindo flor ~~~

    ~ Ugly Thing

    ResponderExcluir

♥ Criticas? Claro, eu curto.
♥ "Seguindo, segue de volta?" Só se eu gostar do blog.
♥ Não xingue.
♥ Deixe o link do seu blog aqui para que eu possa vê-lo :3