14/09/2012

Como fazer um menu flutuante

Oi pessoal, me pediram para fazer um tutorial de como colocar um menu flutuante ( aquele no canto do blog) então hoje eu vou ensinar como fazer ele, e o bom desse menu é que ele fica fofo e não precisa mexer no html.
Cliquem em leia mais
1- Você precisam fazer as imagens primeiro, vocês podem usar qualquer editor de imagem, eu usei o photoscape. Sugiro que deixem as imagens bem organizadas por que vai dar trabalho para hospedar e colar o url delas.(uma dica é vocês fazerem as imagens e ir hospedando elas primeiro e ir colando o url em um bloco de notas por que assim vai ficar mais fácil de colocar a url no código.)

2-Depois vão em adicionar um layout- adicionar um gadget-html/javascript-e colem este código
<style type="text/css">
#gb{
position:fixed;
top:250px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:left;
}
</style>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<a href="URL da página"><img src="url da imagem" width="70" border="0" height="100" /></a><br />

<center><a href="URL da página"><img src="url da imagem" width="80" border="0" height="100" /></a><br />

<a href="URL da página"><img src="url da imagem" width="70" border="0" height="100" /></a><br />

<a href="URL da página"><img src="url da imagem" width="70" border="0" height="100" /></a><br


<a href="URL da página"><img src="url da imagem" width="70" border="0" height="100" /></a><br


 /></center>

<div style="text-align:right">
<a href="javascript:showHideGB()">
</a>
</div>


<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (80-gb.offsetWidth).toString() + "px";
</script></div></div>


onde está verde vocês colocam o link das páginas que vocês quiserem, e o de azul a url da imagem que vocês fizeram.Caso queiram adicionar mais links é só vocÊs copiarem esse código <a href="URL da página"><img src="url da imagem" width="70" border="0" height="100" /></a><br> e colocar igual está no código  

3-Depois de fazer as imagens hospede elas em um site de hospedagem de imagens sugiro este ou algum site de sua preferencia. Vocês hospedam as imagens e vão colocando o link das imagens no lugar correspondente. Caso as imagens fiquem grandes demais é só vocês diminuírem o número onde tem height. Agora é só salvarem e ver se deu certo Se não deu é só tentar de novo bjs  

12 comentários:

  1. Gostei demais do seu blog.
    É um pouco difícil ver o mouse mas tudo aqui é muito lindo!
    Adoraria se me seguisse!
    beijos!

    ResponderExcluir
  2. Fica diferente, gostei.♥

    PiinkCookie.blogspot.com

    ResponderExcluir
  3. uau mas seu blog é lindo demais *0*
    caramba adorei o tutorial
    quem sabe um dia eu faça ele, pelo menos eu nao conhecia viu
    ^^ estou te seguindo
    se puder me seguir eu ficaria muito grata amore

    ResponderExcluir
  4. que top, eu nunca vi um menu flutuante eu acho rsrs mais adorei o tutorial.

    http://blognew-girl(.)blogspot.com/

    ResponderExcluir


  5. Seu blog é lindo, muito fofo mesmo*0* parabéns!! Já estou te seguindo amada =))

    Convido voce e suas leitoras a conhecer meu blog

    toobege.blogspot.com

    Beijinhoooos ;**

    ResponderExcluir
  6. ain, eu adoro tutoriais com menu... mas quando eu preciso de um .. não acho . KKKKKKKKKK'
    Absolute Dream.

    ResponderExcluir
  7. ótimo tutorial!

    http://blogclubeteen.blogspot.com.br/

    ResponderExcluir
  8. Adorei o tutorial, o menu é bem legal ^^

    Beijinhos~~> http://paradisecityoficial.blogspot.com.br/

    ResponderExcluir
  9. Amei o tutorial, talvez depois eu faça. Seu blog é lindo,seguindo... Amei! <3

    ----------> http://kissofgloss.blogspot.com/

    ResponderExcluir

Vai comentar, que bom mais tem algumas regrinhas
-Tem que falar pelo menos um pouco sobre o post
-Os comentários são todos moderados para que eu possa retribuir todos.
-Não esqueçam de deixar o link do blog de vocês para que eu possa retribuir.
-não se esqueçam de seguir.
-PODEM COMENTAR com o link do blogs de vocês sem medo pois eu ativei o captha a confirmação de palavras entã vocês podem comentar sem medo de ter os blogs de vocês excuidos, eu sei que é chato mais é necessário, sugiro que façam isso no blogs de vocês também.
bjs