2 de abr de 2012

COMO FAZER: Menu Lateral Flutuante!

Tumblr_lzfnl280tz1qc2gyho1_500_large
Vemk delícia | Eu conhecida também por fotos de comidas Hahah!
Mesmo que eu não seja muito boa em HTML, muitas vezes eu passo a vocês alguns tutoriais, as vezes de outras línguas: Mas tudo creditado! Então, hoje é um tutorial super fofo, de um menu lateral flutuante! É bem fácil de customizar também! Ficará assim:
Clique na imagem para ampliar!

Vamos com o tuto?


Vá em Layout>Adicionar um Gadget> HTML/Javascript
Coloque o 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"><img src="IMAGEM" width="70" border="0" height="100" /></a><br />
<center><a href=" URL "><img src="IMAGEM" width="80" border="0" height="100" /></a><br />
<a href="URL"><img src="IMAGEM" width="70" border="0" height="100" /></a><br />
<a href=" URL"><img src="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>
Legenda:
URL= Url de onde você irá, quando clicar na imagem
IMAGEM= Esta é a imagem, que aparecerá para você linkar no URL

Não conseguiu? Está com dúvidas? Comente que eu te ajudo!



Fonte: Annys Blog


Nenhum comentário: