Menu Vertical fixo no Blog com efeitos

 Essa ferramenta é muito útil para que seus leitores possam acessar suas redes sociais mais facilmente, ela tem um efeito bem legal em Jquery, contendo Home, Feed,Twitter, etc... (Você mesmo pode estar alterando as imagens e os links da ferramenta)

Gênero: Tutorial Blog

Nível: Avançado

Primeiro Passo:Vá no painel do blog, clique em ''Modelo'' em seguida clique em ''editar HTML'' aperte Ctrl+F e procure por ]]>  e logo em seguida cole o 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); }

Segundo Passo: Agora procure por </head> e cole o seguinte código antes dele:

<script src='http://www.google.com/jsapi'/> <script> google.load("jquery", "1.3.2"); </script> <script type='text/javascript'> $(function() { $('#menusisi a').stop().animate({'marginLeft':'-50px'},1000); $('#menusisi > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-50px'},200); } ); }); </script>

3° passo:Em seguida copie este ultime código e cole antes da tag </body>

<script src='http://www.google.com/jsapi'/> <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> </script>

4° passo: Agora substitua os campos dentro do ultimo código, visualize se estiver tudo certo, salve!

Publicado por Administrador06:32

1

Continuar Lendo