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...
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJs0vS_NdEtzL9W65d9mkryvKt7UhtBDPUhp3kXe2KQYUuPVmV4eZ3yRs_Qd5oALFizBJZ2AaLGm0wy6Ocu72L-lvA6LNlD_0_Zw5jm7piv0Q6v9d1wBvP2fuxbZkCvFD13X6wSeBWQQ/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);
}
2° 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("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° 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>
<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.
Este comentário foi removido pelo autor.
ResponderExcluirAjuda?? Quando eu colo o terceiro código aparece isto:
ExcluirCertifique-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
Olá Kaz!
ExcluirBom!!! este código ultimamente vem apresentando erros, vou dar uma olhada para concertar esse erro...
Atenciosamente: Kelven pedro
O código ja está corrigido, pois tinha um erro no terceiro código..
Excluiragradeço por informar
Este comentário foi removido pelo autor.
ResponderExcluirajuda ai se puder não ta funcionando aqui tb desde ja agradeço.
ExcluirOlá 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.
ExcluirObrigado Vinicius e a todos que nos informarão sobre o erro ocorrido.
o erro já foi corrigido
comigo funcionou a 100% bigaduuuuuuuuuuuuuuuuuu
ResponderExcluirAxei 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 ;)
ResponderExcluirvaleu mano,deu certo no meu blog,só você para fazer esse tuturiais da hora e produtivos
ResponderExcluirEu coloquei no meu mais eu personalizei e coloquei o link do FB fico massa quem quiser conferir >>>>>>http://renderdeboleiro.blogspot.com.br/
ResponderExcluirObrigado :)
ResponderExcluirola como faço para ocultar esse elemento no modelo mobile
ResponderExcluir