Olá putchutchecos, Como estão? espero que bem.
Bom hoje vou ensinar a vocês um tutorial muito lindo que é o menu deslizante,ele é divo de mais ,deixa o blog com um outro visual,fica muito lindo ,eu mesma já utilizo ele em um dos meus blogs...
Bom vamos logo aprender rs, let's go!!!
1 - Vá em Design > Editar HTML e procure por:
]]></b:skin>
2 - Acima da tag, cole:
/* Aqui definimos as propriedades CSS para a lista do menu */ul#navigation {position: absolute;margin: -25px;padding: 0px;top: 0px;right: 150px;list-style: none;z-index:999999;width:721px;}ul#navigation li {width: 103px;display:inline;float:left;}ul#navigation li a {display: block;float:left;margin-top: -2px;width: 100px;height: 5px;background-color:#d4d4d4; /*---cor de fundo---*/background-repeat:no-repeat;background-position:50% 10px;border:1px dashed #8d898b; /*---cor da borda---*/-moz-border-radius:0px 0px 10px 10px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-khtml-border-bottom-right-radius: 10px;-khtml-border-bottom-left-radius: 10px;text-decoration:none;text-align:center;padding-top:80px;opacity: 0.8;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}ul#navigation li a:hover{background-color:#CAE3F2;opacity: 1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}ul#navigation li a span{letter-spacing:2px;font-size:13px;color:#3e3d3e; /*---cor do link---*/text-shadow: 0 -1px 1px #fff;}/* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/ul#navigation .home a{background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/homee.png);}ul#navigation .sobre a {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);}ul#navigation .foryou a {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/fpryou.png);}ul#navigation .tutoriais a {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/tuto.png);}ul#navigation .png a {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/png.png);}
3 - Procure por:
</head>
4 - Acima da tag cole:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(function() {var d=300;$('#navigation a').each(function(){$(this).stop().animate({'marginTop':'-80px'},d+=150);});$('#navigation > li').hover(function () {$('a',$(this)).stop().animate({'marginTop':'-2px'},200);},function () {$('a',$(this)).stop().animate({'marginTop':'-80px'},200);});});</script>
5 - Agora procure por:
<header>
6 - Acima da tag cole:
<ul id='navigation'><li class='home'><a href='URL-AQUI'><span>Home</span></a></li><li class='sobre'><a href='URL-AQUI'><span>Sobre</span></a></li><li class='foryou'><a href='URL-AQUI'><span>For You</span></a></li><li class='tutoriais'><a href='URL-AQUI'><span>Tutoriais</span></a></li><li class='png'><a href='URL-AQUI'><span>Png's</span></a></li></ul>
Prontinho gente espero que gostem...
créditos Kawaii
0 comentários: