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  

15 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. lovely blog! followed you in gfc, hope you will follow back! http://xxxloveisbeautyxxx.blogspot.ie/

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

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

    ResponderExcluir


  6. 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
  7. Hi! Your help is necessary to me. Answer questions please in this message and write answers to comments. In advance many thanks! (I do the project on stories, your opinion is necessary) :*

    http://juliavolk.blogspot.com/2012/09/1812.html

    Hello who reads all my comment. Visit my blog http://juliavolk.blogspot.com/
    I offer mutual reading blogs. If agree, subscribe for my blog and I as I will subscribe for you, shortly. A big kiss for you :***

    ResponderExcluir
  8. Nice post and blog! (;
    Maybe u wanna follow each other?
    If u wanna, let me know. ♥

    Love, Jackffy
    jackffy.blogspot.com

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

    ResponderExcluir
  10. ótimo tutorial!

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

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

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

    ResponderExcluir
  12. 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