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 <--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?
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
Eu adoro esse menu ^^
ResponderExcluir>> bleeding-freaks.blogspot.com
Flor cade meus créditos? :s
ResponderExcluirBeijos
Crazy-HTML
Do Layout :)
ExcluirVeio sem, só que já coloquei fica tranquila :)
ExcluirAmo esse menu.
ResponderExcluirFlor aceito afiliação sim.
xoxo
http://radioactive-pandas.blogspot.com/
Ok, posso ser afiliada do teu blog? >3<
ExcluirClaro que sim flor, só vim avisar que eu mudei de nome e Url. Agora o Radioactive Pandas é Counting Stars ☆ ~.
Excluirenjoy~
http://c-ountingstars.blogspot.com.br/
Ok :33
ExcluirAcho muito fofo esse menu :3 seguindo flor ~~~
ResponderExcluir~ Ugly Thing
2, thank you *o*
Excluir