tutorial - menu air

Oi ~ trouxe um tutorial de como fazer o menu aqui do blog, créditos ao Kawaii World pelo menu :3

clique em leia mais para aprender ~ 

1. Procure por ]]></b:skin> e acima desse código, cole: ul#menusisi { position:fixed; margin:0; padding:0; top:30px; left:0; list-style:none; z-index:9999; } ul#menusisi li { width:190px; } ul#menusisi li a { display:block; margin-left:-10px; width:110px; height:55px; background-color:#ded8d8;  /* Cor de fundo do botão */ background-repeat:no-repeat; background-position:48px center; border:1px solid #ded8d8;  /* Cor da borda do botão*/  -moz-border-radius:0px 5px 5px 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-bottom-right-radius: 5px; -khtml-border-top-right-radius: 5px; /*-moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; */ opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); } ul#menusisi .home a { background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png); } ul#menusisi .pagina1 a { background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png); } ul#menusisi .pagina2 a { background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png); } ul#menusisi .pagina3 a { background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png); } ul#menusisi .pagina4 a { background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png); } ul#menusisi .pagina5 a { background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png); }

Entenda o código:   

position:fixed;

Troque o fixed por absolute se quiser que o menu não role junto com a página.

width:110px;

O menu cortou sua imagem? Aumente esse número para ter uma maior largura.

background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);

Mude para o link da SUA imagem :3

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  2. Agora procure por </head> e acima do código cole: <script src="http://www.google.com/jsapi"> <script> google.load(&quot;jquery&quot;, &quot;1.3.2&quot;); </script> <script type="text/javascript"> $(function() { $(&#39;#menusisi a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},1000); $(&#39;#menusisi &gt; li&#39;).hover( function () { $(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200); }, function () { $(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},200); } ); }); </script> 

Atenção: Visualize e veja se deu tudo certo. Um código de erro apareceu? Coloque OUTRO </script> abaixo do último. 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

3. Salve. Mas como usar o menu? Adicione um gadget de HTML/Javascript lá ná área de editar HTML e cole:

<ul id='menusisi'>
<li class='home'><a href='link do seu blog' title='Home'/></li>
<li class='pagina1'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina2'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina3'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina4'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina5'><a href='link da pagina' title='Titulo'/></li>
</ul>

Mude apenas o link da página e o título.

-----------------------------------------------------

é um pouco extenso, mas fica muito fofo :3 espero que gostem, se usarem creditem o Kawaii ok, até kissu ~