Dicas para Blog

Anônimo

Menu Vertical fixo no Blog com efeitos JQuery

Nesse tutorial ensinarei como colocar um menu vertical fixo no Blog, com efeito Jquery. Esse é um menu que fica fixo na lateral esquerda do blog, e ele vem com os ícones Home, Twitter, freeds e contatos....


OBS: vocês podem estar alterando os botões do menu, o fundo, cor das bordas, e até os ícones...

Primeiro você vai em Design> em Editar HTML e depois marque a opção Expandir modelos de Windgets
 

Use a tecla de atalho Ctrl + F pra você pesquisar esse tag: ]]></b:skin>  e depois de ter localizado o tag cole esse seguinte código antes dele.

ul#menusisi { 
position:fixed; 
margin:0; 
padding:0; 
top:50px; 
left:0; 
list-style:none; 
z-index:9999; 
} 
ul#menusisi li { 
width:100px; 
} 
ul#menusisi li a { 
display:block; 
margin-left:-50px; 
width:100px; 
height:55px; 
background-color:#141414;  /* Cor de fundo do botão */ background-repeat:no-repeat; 
background-position:48px center; 
border:1px solid #cfcfcf;  /* Cor da borda do botão*/ 
-moz-border-radius:0px 10px 10px 0px; 
-webkit-border-bottom-right-radius: 10px; 
-webkit-border-top-right-radius: 10px; 
-khtml-border-bottom-right-radius: 10px; 
-khtml-border-top-right-radius: 10px; 
/*-moz-box-shadow: 0px 4px 3px #000; 
-webkit-box-shadow: 0px 4px 3px #000; 
*/ 
opacity:0.8; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
} 
ul#menusisi .home a { 
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/
AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png); 
} 
ul#menusisi .twitter a { 
background-image:url(http://4.bp.blogspot.com/_DCJ4PAWLOdE/TIQlsr_XkyI
/AAAAAAAAEtM/2f7I75luHyI/s1600/1283728665_twitter_47.png); 

} 
ul#menusisi .comentários a { 
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/
AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png); 
} 
ul#menusisi .rssfeed a { 
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/
AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png); 
} 
ul#menusisi .contato a { 
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S
9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png); 
} 

 2° copie esse outro código, e cole antes do Tag: </head>

<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> 

 3° E por final, copie esse terceiro código e cole antede do Tag: </body> (logo no Final da página)

<ul id='menusisi'> 
<li class='home'><a href='SEU-ENDEREÇO' title='Home'/></li> 
<li class='twitter'><a href='twitter.com/USARNAME' title='Twitter'/></li>
<li class='rssfeed'><a href='http://SEU_BLOG.blogspot.com/feeds/posts/default'title='RSS Feed'/></li> 
<li class='comentários'><a href='http://SEU_BLOG.blogspot.com/feeds/comments/full'title='Comentários'/></li> 
<li class='contato'><a href='mailto: SEU_EMAIL' title='Contato'/></li> 
</ul> 


Faça as seguintes alterações nesse último código, de acordo com o título de cada referido botão.
E é só isso galera, mas antes de salvar visualize antes de salva modelo, se você gostou do menu é só salvar.
Obrigado!
0 comentários
,

0 comentários:

Postar um comentário

Assinar: Postar comentários