18 de março de 2012

13

Menu Vertical fixo no Blog com efeitos JQuery



Olá leitores! Neste tutorial venho lhes mostrar um menu Vertical com efeito JQuery que é feito todo por código Css, esse menu fica fixo na lateral esquerda do blog e tem um efeito deslizante quando passamos o Mouse sobre o botão...

Para colocar esse menu, primeiro acesse o painel de edição do seu Blog, em seguida vá em Modelo>> depois em Editar HTML >> e clique em Prosseguir.
Agora vamos procurar um código então pra facilitar use a tecla de atalho Ctrl + F e procure por essa tag: ]]></b:skin>  

Depois de ter localizado o Tag, copie esse código CSS e cole CIMA do Tag que você localizou. 

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/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png); 
}


  Vamos agora procurar outro código, então novamente utilize as teclas Ctrl + F e procure por esse Tag: </head>
 E antes desse tag acrescente esse Código Script:

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

  E por fim, procure por esse outro Tag: </body> e cole esse código a Antes dele:


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


E nesse Terceiro código altere as informações destacadas em vermelho pelas do seu Blog, de acordo com o título de cada referido botão.

Agora clique em visualiza e depois salve.

Observações: Olá pessoal este código anteriormente estava com erros mais eu refiz o tutorial novamente e já está tudo organizado, o erro foi encontrado no 3 terceiro código... Obrigado.

13 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Ajuda?? Quando eu colo o terceiro código aparece isto:

      Certifique-se de que todos os elementos XML estão fechados adequadamente.
      Mensagem de erro em XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".

      Me dá uma solução se possivel,vlw

      Excluir
    2. Olá Kaz!
      Bom!!! este código ultimamente vem apresentando erros, vou dar uma olhada para concertar esse erro...
      Atenciosamente: Kelven pedro

      Excluir
    3. O código ja está corrigido, pois tinha um erro no terceiro código..
      agradeço por informar

      Excluir
  2. Respostas
    1. ajuda ai se puder não ta funcionando aqui tb desde ja agradeço.

      Excluir
    2. Olá Vinicius, bom! desculpas pois ouve um erro no terceiro código, mas eu já consertei isso. o código já estar corrigido vocês já podem estar utilizando este efeito Css em seus blogs.
      Obrigado Vinicius e a todos que nos informarão sobre o erro ocorrido.
      o erro já foi corrigido

      Excluir
  3. comigo funcionou a 100% bigaduuuuuuuuuuuuuuuuuu

    ResponderExcluir
  4. Axei o erro tambem. è no passo 2 . Se fizer 1 por um nao dá erro . Coloquei o home cortando no codigo o twitter e mail. nao da qq erro . experimente ;)

    ResponderExcluir
  5. valeu mano,deu certo no meu blog,só você para fazer esse tuturiais da hora e produtivos

    ResponderExcluir
  6. Eu coloquei no meu mais eu personalizei e coloquei o link do FB fico massa quem quiser conferir >>>>>>http://renderdeboleiro.blogspot.com.br/

    ResponderExcluir
  7. ola como faço para ocultar esse elemento no modelo mobile

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook